时间戳

首页 > 解决方案 > 在未呈现的组件中访问不正确的属性时出错

javascript - 在未呈现的组件中访问不正确的属性时出错

问题描述

所以我有这个组件，它接收一个组件并在满足条件时呈现子组件，

const Can = ({ condition, children }) => (condition ? children : null);

const obj = { a: 2 };
export default function App() {
  return (
    <div className="App">
      <Can condition>Condition true</Can>
      <Can>
        {console.log('Inside false condition')}
        <p>False condition {obj.b.x}</p> {/* b.x will throw error */}
      </Can>
    </div>
  );
}

这肯定会失败，但我不明白反应在什么时候解析它的内容？condition如果为假，为什么执行console.log ？

将子项作为函数调用时不会发生此错误

const Can = ({ condition, children }) => (condition ? children() : null);

const obj = { a: 2 };
export default function App() {
  return (
    <div className="App">
      <Can>
        {() => <p>False condition {obj.b.x}</p>}
      </Can>
    </div>
  );
}

标签： javascriptreactjs

解决方案

React 在编译时将其内容解析为 Javascript。所以发生的事情是，在编译之后，当 DOM 构建开始时，所有组件都被一个接一个地挂载。当Can要安装一个组件时，它的子组件将被处理并作为children道具传递。在该处理期间，该console.log语句被执行，您会看到输出。此外，错误来了，在这个处理过程中只有当obj.b.x没有找到。

在第二种情况下，当您将子项作为函数传递时，JSX 返回一个函数，该函数仅在条件为真时执行，因为在您的情况下条件为假，因此不会处理段落标记，因此不会出现错误.

在此处检查子组件的日志记录，您会得到一个更好的主意。

推荐阅读