V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
azh7138m
V2EX  ›  React

如何在父组件中获取子组件 render 的返回值呢?

  •  
  •   azh7138m ·
    muzea · 2018-11-08 13:41:57 +08:00 · 2441 次点击
    这是一个创建于 2189 天前的主题,其中的信息可能已经有所发展或是发生改变。

    想在 content 之间插入一些内容,但是要怎么在父组件中判断子组件的渲染结果是不是 null 呢?

    代码类似

    https://codesandbox.io/s/k9nr4pqz9r

    function LI({ show = true }) {
      if (show) {
        return <span>content</span>;
      }
      return null;
    }
    
    function UL({ children }) {
      let ret = [];
      React.Children.forEach(children, (child, index) => {
        if (true /* how to get child render result ? */) {
          ret.push(child);
          ret.push(" * ");
        }
      });
      if (ret.length) {
        ret.pop();
      }
      return ret;
    }
    
    function App() {
      return (
        <>
          <UL>
            <LI />
            <LI />
            <LI />
            <LI />
          </UL>
          <hr />
          <UL>
            <LI />
            <LI show={false} />
            <LI />
            <LI />
          </UL>
        </>
      );
    }
    
    

    so 链接: https://stackoverflow.com/questions/53201879/how-do-i-determine-in-the-parent-component-whether-the-rendering-result-of-the-c

    4 条回复    2018-11-08 18:53:23 +08:00
    lijsh
        1
    lijsh  
       2018-11-08 14:13:02 +08:00
    子组件上的 show 属性也应该来自父组件吧
    azh7138m
        2
    azh7138m  
    OP
       2018-11-08 15:58:11 +08:00
    @lijsh 是来自祖先,并不是 UL 传给他的,这里只是一个示例,实际可能不是这个属性
    lijsh
        3
    lijsh  
       2018-11-08 16:06:44 +08:00
    @azh7138m #2 那你用 render props,由子组件决定怎么渲染,父组件只管传父组件内的属性过去。
    azh7138m
        4
    azh7138m  
    OP
       2018-11-08 18:53:23 +08:00
    @lijsh render props 是父组件向子组件传入 render,和这个需求没关系,在 UL 里面还是没法知道 render 的结果。
    今天翻了一下源码,在 react dom 渲染之前应该是拿不到 render 结果,react 只维护状态。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5505 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 06:53 · PVG 14:53 · LAX 22:53 · JFK 01:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.