Question

正如标题所说，我试图找到一种方法将我的道具从一个组件传递到另一个组件，彼此之间没有关系。唯一与之相关的是链接：

const ConversationPreview = (props) => {
  var people = props.people;
  const messages = props.messages;

  const conversationName = people.map(person => {

    // Filter message from conversation's sender
    function filterMessageBySender(obj){
      if ('from' in obj && obj.from === person.nickname) {
        return true;
      }
    }

    const messagesByCurrentSender = messages.filter(filterMessageBySender);
    const lastMsg = messagesByCurrentSender[messagesByCurrentSender.length - 1]

    function passProps() {
      return <Conversation people={people} />
    }

    return (
      <li key={person.id}>
        <Link to={`/${person.nickname}`} onClick={passProps}>
          <Avatar image={person.pic} />
          {person.nickname}
          <p> {lastMsg.body} </p>
        </Link>
      </li>
    )
  });

  return (
    <ul>
      {conversationName}
      {props.children}
    </ul>

  )
};

这是应该接收人们道具的组件：

const Conversation = (props) => {

  console.log(props);
  //console.log(people);

  function findConversationPerson(person){
    return person.nickname === props.params.conversation
  }
  const currentPerson = peopleOld.find(findConversationPerson); 


  return (
    <div>
      <header>
        <Avatar image={currentPerson.pic} />
        <h1> {props.params.conversation} </h1>
      </header>
      <main>
        <MessagesList sender={currentPerson}/>
      </main>
    </div>
  )
};

是否有（好）方式或者我应该重新思考我构建应用程序的整个方式？

Answer 1

经过大量资源后我发现这是一个非常常见的问题，主要与react-router有关。问题是通常在反应中我们在组件内部传递道具，这些道具必须在渲染函数中明确定义。但有时我们不想直接渲染它们，也许路由器会关注渲染它们的时间和地点。那么如何传递道具？

一种方法是使用传递的数据克隆子项。因此，在您的App渲染功能中，您将拥有：

{React.cloneElement(this.props.children, {dataChildrenNeeded: this.props.parentsData})}

所以你的孩子都会拥有相同的道具。他们可以轻松访问：

this.props.dataChildrenNeeded

这将适用于您想传递的州或其他任何内容。

为了更好的解释和进一步阅读，这里是我的主要来源：

Stackoverflow: React router and this.props.children

react-router github issue #1857

如何在React中的两个不相关和无状态组件之间传递道具？

1 个答案: