在react组件中渲染未定义？

Question

当访问props undefined中的cannot read property of undefined时，为什么反应崩溃

前一个：知道props.name未定义，此代码将返回错误。

const component = (props) => {
         return(
             <p>{props.name}</p>
     )
  }

示例二：为什么在这种情况下react可以无错误地渲染undefined，而在这种情况下返回不可见是可以的。

const componentTwo = () => {
         return(
             <p>{undefined}</p>
     )
  }

Answer 1

撰写props.name不应给您带来错误cannot read property 'name' of undefined。如果name对象上不存在props属性，则props.name就是undefined。

但是，如果有person对象上没有props属性，props.person会给您undefined。尝试访问name上的undefined会引发错误，因为您无法访问undefined上的属性。

然后您可以使用&&运算符来确保在使用props.person之前已设置props.person.name。

示例

const MyComponent = props => {
  return <p>{props.person && props.person.name}</p>;
};

还要确保您的组件名称以大写字母或the component will be interpreted as a string instead of as a variable when using it开头。

Answer 2

如果您没有将道具传递给组件，则道具将为undefined。如果这是真的（您没有传递任何道具），那么尝试访问props.name将抛出该确切错误！为了确保将道具提供给组件，可以使用另一个答案&&来完成。

const MyComponent = props => {
  return <p>{props && props.name}</p>;
};

要回答另一部分，React将渲染{undefined}，因为没有要渲染的东西。只是说undefined并不是要访问未定义的属性。类似于您有

之类的对象

var myObject = undefined

，然后尝试访问此对象的name属性：

console.log(myObject.name) //throws 'can not read property name of undefined'