React Prop 渲染为对象 - 不明白为啥

Posted 2023-02-22

【中文标题】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 访问该属性，为什么它会渲染一个包含同名属性的对象？

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

提前致谢。

【参考方案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>
   )