So senden Sie this.state von einer Komponente zum Relay-Stammcontainer

Question

Ich möchte meine Root-Abfrage-Parameter basierend auf der this.state.eventid, die eine untergeordnete Komponente ist, aber ich habe keine Ahnung, wie Requisiten Relay-Root-Container erhalten. Ich begann mit dem Relay-Starter-Kit.

habe ich Komponente reagieren, die ein Dropdown-Menü hat, und onSelect es für eventId

renderAttend() { 
    if (this.props.groups != null && this.state.success != true) { 

    var events = this.props.events.map(function(event){ 

     var boundSelect =() => {this.setState({eventid:event.nodes[0].id})} 

     return <MenuItem style={{fontSize:20}}eventKey={event.nodes[0].id} onSelect={boundSelect.bind(this)}>{event.nodes[0].properties.summary}/{event.nodes[0].properties.start}</MenuItem> 

       },this) 


    var teams = this.props.groups.map(function(team){ 
     var boundSelect =() => {this.setState({teamid:team.nodes[0].id})} 
     return <MenuItem style={{fontSize:20}}eventKey={team.nodes[0].id} onSelect={boundSelect.bind(this)}>{team.nodes[0].properties.name}</MenuItem> 
       },this) 


     return (
       <div> 

     <ButtonGroup> 
     <DropdownButton style={{padding:"15px",fontSize:20}}title="Events" id="bg-vertical-dropdown-2"> 
     {events} 
</DropdownButton> 
<DropdownButton style={{padding:"15px",fontSize:20,marginLeft:"5px"}} title="Groups" id="bg-vertical-dropdown-2"> 
    {teams} 
</DropdownButton> 

</ButtonGroup> 
     </div> 
      ) 

} 
} 

setStates Ich möchte diesen Zustand verwenden, um irgendwie meine Wurzel Abfrage zu ändern ... meine approute ... Import Relais von 'React-Relais';

export default class extends Relay.Route { 
    static paramDefinitions = { 
eventId: {required: false} 
    }; 

static queries = { 
    Event :() => Relay.QL`query{eventState(eventId:$eventId)}`, 
    }; 

    static routeName = 'AppHomeRoute'; 

} 

und meine app.js

import 'babel-polyfill'; 

import App from './components/App'; 
import AppHomeRoute from './routes/AppHomeRoute'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Relay from 'react-relay'; 



    ReactDOM.render(
    <Relay.RootContainer 
    Component={App} 
    route= {new AppHomeRoute} 
    renderLoading={function() { 
    return <div style=   {{display:"flex",justifyContent:"center",marginTop:"55px"}}> <h1>Loading...</h1></div>; 
    }} 
    renderFailure={function(error, retry) { 
    return (
    <div> 
     <h1>Click Refresh</h1> 
     </div> 
    ); 
    }} 


    />, 
    document.getElementById('root') 
    ); 

Jetzt möchte ich von der reagieren Komponente this.state.eventid meiner Stamm Abfrage zu aktualisieren, aber ich habe keine Ahnung, wie Daten von untergeordneten Komponente passieren um auf root.container zu reagieren. Ich möchte nicht react-Router dafür verwenden :) p.s. this.props.events wurden mir von einem Ajax-Aufruf übergeben, so dass sie nicht in relay/graphql-Daten gespeichert werden.

Answer 1

Für einen solchen Fall verwenden, desto besser, was zu tun ist Ihre Wurzel Abfrage in eine Geschichte zu verpacken wie

{ 
 
    store { 
 
    events(eventId:$eventId) 
 
    } 
 
}

So in der Wurzel Abfrage nur Sie haben

export default class extends Route { 
 
    static queries = { 
 
    app:() => Relay.QL`query { store }` 
 
    }; 
 

 
    static routeName = "AppRoute"; 
 
}

Und auf der Seite erstellen Sie eine fragemnt wie

let RelayApp = createContainer(SomeComponent, { 
 
    initialVariables: { 
 
    eventId: null 
 
    }, 
 
    fragments: { 
 
    app:() => Relay.QL ` 
 
     fragment on Store { 
 
     id 
 
     events(eventId: $eventId) { 
 
      pageInfo { 
 
      hasNextPage 
 
      } 
 
      edges { 
 
      cursor 
 
      node { 
 
       name 
 
       ... 
 
      } 
 
      } 
 
     } 
 
     } 
 
    `, 
 
    }, 
 
}); 
 

 
export 
 
default RelayApp;

Für das Kind Komponente, können Sie die eventId und onChange Event-Handler als Requisiten aus übergeordneter Komponente gesetzt. Und in der übergeordneten componet Sie den Event-Handler implementieren und rufen this.props.setVariables ({eventId: someVal}) wie

// Child Component 
 

 
export default class Menu extends Component { 
 
    render() { 
 
    return(
 
     <ul> 
 
     <li onClick={() => this.props.selectItem(val)}>{val}</li> 
 
     ... 
 
     </ul> 
 
    ) 
 
    } 
 
} 
 

 
// Parent Component 
 

 
class Main extends Component { 
 
    _selectItem = (val) => { 
 
    this.props.relay.setVariables({eventId: val}); 
 
    } 
 
    
 
    render() { 
 
    return(
 
     <div> 
 
     <Menu selectItem={() => this._selectItem}/> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
let RelayApp = ... 
 

 
export default Main

Hope this helfen.

Answer 2

Es gibt keinen einfachen Weg, dies zu lösen. Entweder Verwendung reagieren-Router-Relais oder verschachtelt die Abfrage wie folgt und this.props.relay.setVariables()

viewer { 
    eventState(eventid:$eventid) { 
     data 
    }    
}