Question

我想根据作为子组件的this.state.eventid更改我的根查询参数，但我不知道如何获取中继根容器的道具。我开始基于relay-starter-kit。

我有一个具有下拉菜单的React组件，并且onSelect it setStates for 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>
            )

}
}

我想使用此状态以某种方式更改我的根查询... 我的approute ...... 从＆＃39; react-relay＆＃39;;

导入中继

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

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

  static routeName = 'AppHomeRoute';

 }

和我的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')
    );

现在我想来自react组件的this.state.eventid来更新我的根查询，但我不知道如何从子组件传递数据以响应root.container。我不想使用react-router这个:) 附： this.props.events通过ajax调用传递给我，因此它们不会保存在relay / graphql数据中。

Answer 1

对于这种情况，最好的做法是将根查询包装成像

这样的故事

＆＃13;

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

＆＃13;

所以在root查询中你只有

＆＃13;

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

＆＃13;

在页面中，您可以创建一个类似

的fragemnt

＆＃13;

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;

＆＃13;

对于子组件，将eventId和onChange事件处理程序设置为父组件的props。在父组件中，您实现事件处理程序并调用this.props.setVariables（{eventId：someVal}），如

＆＃13;

// 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

＆＃13;

希望这会有所帮助。

Answer 2

没有简单的方法可以解决这个问题。要么使用react-router-relay，要么像这样嵌套查询并使用this.props.relay.setVariables()

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

如何将this.state从组件发送到中继根容器

2 个答案: