Wie Requisiten Requisiten zwischen zwei nicht verwandten und zustandslosen Komponenten übergeben?

Question

Wie der Titel schon sagt, versuche ich einen Weg zu finden, meine Requisiten von einer Komponente an eine andere zu übergeben, die nicht miteinander verwandt sind. Das einzige, was ihnen verwandt ist ein 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> 

) 
}; 

Und das ist die Komponente, die die Menschen Requisiten erhalten sollten:

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

Gibt es eine (gut) so oder sollte ich wieder denke, das Ganz im Sinne der Strukturierung der App?

Answer 1

Nach vielen Ressourcen, die ich entdecke, ist dies ein ziemlich häufiges Problem und ist vor allem mit react-Router verbunden. Das Problem ist, dass wir in der Regel in Reagieren Props innerhalb der Komponente übergeben, die explizit in der Render-Funktion definiert werden müssen. Aber manchmal wollen wir sie nicht direkt rendern und vielleicht kümmert sich der Router darum, wann und wo sie rendern. So, wie Requisiten zu übergeben?

Eine Möglichkeit ist, die Kinder mit den übergebenen Daten zu klonen. Also, machen-Funktion in Ihrer App haben Sie:

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

Also alle Ihre Kinder gleichen Requisiten haben. Und sie können leicht zugänglich sein, indem Sie:

this.props.dataChildrenNeeded 

Dies funktioniert mit staatlichen oder whateverlse Sie wollen passieren.

Zur besseren Erklärung und weiterführende Literatur hier sind meine Hauptquellen:

Stackoverflow: React router and this.props.children

react-router github issue #1857