React Prop 渲染为对象 - 不明白为什么答案

【问题标题】：React Prop rendering as object - don't understand whyReact Prop 渲染为对象 - 不明白为什么
【发布时间】：2017-02-06 20:14:58
【问题描述】：

我是 React 的新手，我只是想不通...

我正在尝试将我的状态传递给父组件中的道具，然后在子组件中呈现该状态。像这样：

父组件

class App extends Component {
   constructor(props) {
      super(props);
      this.state = {
         text: 'hello'
      }
   }
   render() {
      return (
         <div className="App">
            <MessageList textProp={this.state.text}/>
         </div>
      );
   }
}

子组件

const MessageList = textProp => {
   return (
   <div className='MessageList'>
      {textProp}
   </div>
   )
}

React 无法正确渲染，声称它是一个正在尝试渲染的对象。

我可以使用{textProp.textProp} 访问该属性，为什么它会渲染一个包含同名属性的对象？

我相信这很简单，但我可以解释一下！

提前致谢。

【问题讨论】：

标签： object reactjs properties render state

【解决方案1】：

组件的 props 是一个对象，就像它们的状态是一个对象一样。因此，您想要更多类似的东西：

const MessageList = props => {
   return (
   <div className='MessageList'>
      {props.textProp}
   </div>
   )
}

或者，使用解构：

const MessageList = ({ textProp }) => {
   return (
   <div className='MessageList'>
      {textProp}
   </div>
   )
}

【讨论】：

谢谢！完美解释。

【解决方案2】：

当您声明无状态组件时，您需要指定您希望它接收的参数，在您的情况下可以是 (props) 或 ({ specific })：

const MessageList = ({ textProp }) => (
 <div className='MessageList'>
      {textProp}
   </div>
);

请注意我如何使用=> () 来返回标记，您不必对{ return () } 进行操作，这只是一个提示，可以更好地运行：)

【讨论】：

为小费干杯！我实际上忘记了箭头函数的额外优势......

【解决方案3】：

MessageList 中的textProp 是来自父级的props 的集合。在您的情况下，该集合将只有 textProp. 要完成这项工作，您需要执行以下操作。

const MessageList = ( {textProp} ) => {
   return (
   <div className='MessageList'>
      {textProp}
   </div>
   )
}

或

const MessageList = (textProp) => {
   return (
   <div className='MessageList'>
      {textProp.textProp}
   </div>
   )
}

【讨论】：