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

Question

As title said, i'm try to find a way to pass my props from one component to anotehr taht are not related between each others. The only thing that related them is a link:

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>

  )
};

And this is the component that should receive the people props:

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>
  )
};

Is there a(good) way or should I re-think the whole way i structured the app?

Answer 1

After lot of resource i discover this is quite a common problem and is mostly related to react-router. The problem is that usually in react we pass props inside the component which have to be explicitly defined in the render func. But sometimes we don't want to render them directly and maybe the router take care about when and where render them. So how to pass props?

A way to do it is to clone the children with the passed data. So, in your App render function you will have:

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

So all your children will have same props. And they can easily be access by doing:

this.props.dataChildrenNeeded 

This will work with state or whateverlse you want to pass.

For better explanation and further reading here are my main sources:

Stackoverflow: React router and this.props.children

react-router github issue #1857