reactjs - 如果所有组件在 ReactJS 中返回 Null，则渲染不同的组件

Question

我有一个呈现 4 个子组件的父组件。如果所有 4 个子组件都返回 null，我想渲染一个不同的组件。

我想做什么:

const Child = () => {

  return(<div> hi </div>);   // I expect if I return(null) to render Nothing Found whic doesn't happen
}
const Parent = () => {
  const children = [1, 2, 3].map(() => {
    return (<Child />);
  });

    return (
    <div>
      {children.some(element => element !== null) ? (
          children
        ) : (
          <div>Nothing found</div>
      )}
    </div>
  )
}

Answer 1

假设在父组件中决定是否呈现 null，您可以执行如下操作:

function Parent() {
  const children = [1, 2, 3].map(() => {
    return null, or whatever;
  });

  return (
    <>
      {children.some(element => element !== null) ? (
        children
      ) : (
        <div>Nothing found</div>
      )}
    </>
  );
}

编辑:如果父组件总是返回元素，并且由子组件决定是否返回 null，那么您的选择非常有限。子元素直到 future 才会渲染(它是在父元素完成渲染之后，但那仍然是在未来)，所以父元素创建的元素没有任何关于最终将被渲染的信息。

我能想到的最好的办法是拥有一些静态实用函数，它作为子逻辑的一部分被调用，您可以在父级中调用它来预览子级可能会做什么。例如:

export const willRender = (props) => {
  if (/* check something on the props */) {
    return false;
  } else {
    return true;
  }
}

export const Child = (props) => {
  if (willRender(props)) {
    return <div>Hello World</div>
  } else {
    return null;
  }
}

在父类中使用这样的东西:

function Parent() {
  return (
    <>
      {[1, 2, 3].some(() => willRender({ /* whatever props */ })) ? (
         [1, 2, 3].map(() => <Child /* same props */ />)
       ) : (
         <div>Nothing found</div>
       )}
    </>
  );
}