关于子/道具渲染的困惑 - 何时评估表达式答案

【问题标题】：Confusion with regard to rendering of children/props - when are expression evaluated关于子/道具渲染的困惑 - 何时评估表达式
【发布时间】：2020-06-03 16:12:32
【问题描述】：

我有进度条组件和一个使用它的组件：

const Progress = ({children, show}) => {
  if (!show) return <ProgressBar />;
  return children;
}

const ComponentUsingProgress = () => {
  const {loaded, data} = loadData();

  return <Progress show={!loaded} >
          <div someProp={data.nested1.nested2} />
         </Progress>
}

即使进度条只在加载数据时呈现子级，这也会引发与访问数据对象上未定义的属性相关的错误。我没想到会出现错误，因为我认为进度条只会在加载数据后才呈现子项。什么给了？

【问题讨论】：

需要有关错误的更多详细信息
可能你期待像 React Suspense hooks 这样的东西，但我不确定
错误将类似于：Uncaught TypeError: Cannot read property 'nested2' of undefined
你能控制数据还是 loadData() 返回什么？
loadData 可能会返回类似 {loaded: true, data:{ nested1: {nested2: 'foo'}}} 的内容。我认为因为进度条仅在加载数据时呈现子项，所以子项 (
) 只会在加载数据时被评估，但看起来这是不正确的.

标签： javascript reactjs material-ui

【解决方案1】：

对于任何有类似困惑的人，我想我在（所有地方）react 文档中找到了答案：

Babel 将 JSX 编译为 React.createElement() 调用。

据我了解，此编译步骤发生在调用父级时。在子节点上调用 React.createElement，导致 props 被评估（即使它们可能不会被渲染）。

【讨论】：