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

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

  •  
  •   azh7138m · 4 天前 · 189 次点击

    想在 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
        1
    lijsh   4 天前
    子组件上的 show 属性也应该来自父组件吧
        2
    azh7138m   4 天前
    @lijsh 是来自祖先,并不是 UL 传给他的,这里只是一个示例,实际可能不是这个属性
        3
    lijsh   4 天前
    @azh7138m #2 那你用 render props,由子组件决定怎么渲染,父组件只管传父组件内的属性过去。
        4
    azh7138m   4 天前
    @lijsh render props 是父组件向子组件传入 render,和这个需求没关系,在 UL 里面还是没法知道 render 的结果。
    今天翻了一下源码,在 react dom 渲染之前应该是拿不到 render 结果,react 只维护状态。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   759 人在线   最高记录 3821   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 17ms · UTC 20:28 · PVG 04:28 · LAX 12:28 · JFK 15:28
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1