React - 谓词功能组件

Question

我创建了一个 react 功能组件来基于谓词包装代码段（而不是在 JSX 中使用三元）。

所以，组件看起来像这样：

const PredicateWrapper = ({ children, iff, otherwise }) => (
    iff ? children : (otherwise || null)
);

并且可以这样使用：

<PredicateWrapper iff={students}>
   {students.map(student => <Student />)}
</PredicateWrapper>

问题在于，如果students 为空，则会引发错误“无法读取空属性映射”。如果我用一些文本替换students.map，则文本不会呈现，证明包装器正在工作，但是，包装器的重点是处理students 为空的情况，我希望它不会“在包装器中输入”。

如果iff 是假的，我怎样才能实现这样的东西，允许内部代码不评估并抛出运行时错误？

Answer 1

非常有趣的问题！

我在这里可能大错特错，但我认为这是因为students.map(student => <Student /> 仍然是您父组件渲染树的一部分。因此，当 React 尝试构建父组件的树时，它会尝试执行引发错误的那一行。

PredicateWrapper 在子组件被递归时被挂载和解析，这是iff 将启动的时候——但那是在第二次迭代中。

例如，如果我这样做，我不会得到错误

const Child = ({ students }) => {
  return students.map(student => <Student />);
};


<PredicateWrapper iff={students}>
  <Child students={students} />
</PredicateWrapper>

Answer 2

让我们看看如何将 JSX 编译成带有 online Babel compiler 的 JavaScript：

const PredicateWrapper = ({ children, iff, otherwise }) =>
  iff ? children : otherwise || null;

const students = null;

const App = () =>
  React.createElement(
    PredicateWrapper,
    {
      iff: students,
    },
    students.map((student) => React.createElement(Student, null))
  );

现在您可以看到students.map 将被执行并导致错误“Cannot read property map of null”

实现目标的一种可能实现是使用渲染道具：

术语“render prop”是指一种在 使用值为函数的 prop 对组件进行反应。

const PredicateWrapper = ({ render, iff, otherwise = () => null }) =>
  iff ? render() : otherwise();

const StudentA = () => <span>?</span>;
const StudentB = () => <span>?</span>;

const students = [StudentA, StudentB];
//const students = null;

function App() {
  return (
    <PredicateWrapper
      iff={students}
      render={() => students.map(Student => <Student />)}
    />
  );
}