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

Question

我是React的新手，我只是想不出来......

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

父组件

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}访问该属性，为什么它呈现包含同名属性的对象？

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

提前致谢。

Answer 1

组件的道具是一个对象，就像它们的状态是一个对象一样。 所以你想要更像的东西：

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

或者，使用解构：

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

Answer 2

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

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

注意我怎么做=> ()将返回标记，你没有做{ return () }只是一个提示更好地运行:)

Answer 3

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

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

要么

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