如何在React中的兩個不相關和無狀態組件之間傳遞道具？

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和this.props.children

react-router github issue＃1857