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

Question

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

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

父组件

declare @user_date1 date = cast(? as date)

Select * from ODBCTable where date >= @user_date1

子组件

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

React无法正常渲染，声称它是一个试图渲染的对象。

我可以使用const MessageList = textProp => { return ( <div className='MessageList'> {textProp} </div> ) } 访问该属性，为什么它呈现包含同名属性的对象？

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

提前致谢。

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

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

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

或

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