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

Question

我是 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} 访问属性，为什么它会渲染一个包含同名属性的对象？

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

提前致谢。

Answer 1

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

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

或者，使用解构：

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

Answer 2

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

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

或

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

Answer 3

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

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

请注意我如何 => () 将 return 标记，您不必对 { return () } 做一个运行更好的提示 :)

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

React Prop rendering as object - don't understand why

state

properties

render

object

reactjs

父组件

子组件