javascript - React 中的多级 props

Question

我最近开始学习react。我无法理解这一点:

this.props.message.text

我知道message是一个对象，里面有一个键值对，键为text 。但我的问题是当我们想要将 prop 传递给组件时:

<Component message={message}>

我的问题是我们为什么要写 message={message} ？

为什么我们不应该写message={message.text}相反，这样我们就知道我们想要 text ？

它怎么知道我们想要 text在 message对象？

Answer 1

这取决于组件正在做什么。假设您的消息对象中有更多属性，例如:

{
  text: 'this is my message',
  author: 'odiwxe',
  sentAt: '2018-05-30T12:30:00'
}

然后您的组件可能需要所有这些信息才能显示它，以便您可以像您所做的那样传递它:

<Component message={message}>

否则，如果您的组件只关心消息文本，您可能会将其更改为如下所示:

<Component messageText={message.text}>

这取决于你!