Reactjs 如何让QueryRenderer传播父属性更改？ 使用继电器现代V.1.4.1，考虑以下列表< /代码>组件.< /P>

它使用两个道具

foo

和

bar

，并使用这些道具和GraphQL查询的结果呈现一个

表

组件：

class List extends React.Component {

  constructor(props) {
    super(props);
    // I accept this.props.foo and this.props.bar
    this.renderQuery = this.renderQuery.bind(this);
  }

  render() {
    return <QueryRenderer
      environment={this.props.relayEnvironment}
      query={SomeQuery}
      variables={{
        count: 20,
      }}
      render={this.renderQuery}
    />;
  }

  renderQuery(readyState) {
    console.log("List component props:");
    console.log(this.props);
    return <Table 
      foo={this.props.foo} bar={this.props.bar} 
      data={readyState.data}
    />
  }

}

或

---

有什么想法吗？

删除类组件，并将上述代码更改为：

const List = (parentProps) => (
  <QueryRenderer
    environment={parentProps.relayEnvironment}
    query={SomeQuery}
    variables={{
      count: 20,
    }}
    render={({ props }) => (
      <Table 
        foo={this.parentProps.foo} bar={this.parentProps.bar} 
        data={props.data}
      />
    )}
  />
)

const List=（parentProps）=>(
(
)}
/>
)

QueryRenderer本身已经是一个React组件，您通常不必将其包装在类组件呈现中

列表现在是一个纯函数组件，当它接收到新的props（parentProps）时，它将重新呈现，因此表将重新呈现

<QueryRenderer
  environment={this.props.relayEnvironment}
  query={SomeQuery}
  variables={{
    count: 20,
  }}
  render={this.renderQuery}
  {...this.props}
/>

const List = (parentProps) => (
  <QueryRenderer
    environment={parentProps.relayEnvironment}
    query={SomeQuery}
    variables={{
      count: 20,
    }}
    render={({ props }) => (
      <Table 
        foo={this.parentProps.foo} bar={this.parentProps.bar} 
        data={props.data}
      />
    )}
  />
)