如何将自定义道具传递给 QueryRenderer 渲染函数？

Question

给定以下 QueryRenderer 组件：

class ProjectQueryRenderer extends Component {
  constructor(props) {
    super(props);
    this.renderProjectList = this.renderProjectList.bind(this);
  }

  renderProjectList({ error, props }) {
    if (props) {
      return (
        <ProjectList
          connection={props.viewer.allProjects}
          onSelectProject={this.props.onSelectProject}
          selectedProject={this.props.selectedProject}
        />
      );
    }
  }

  render() {
    return (
      <QueryRenderer
        environment={environment}
        query={ProjectsQuery}
        render={this.renderProjectList}
      />
    );
  }
}

ProjectQueryRenderer.propTypes = {
  onSelectProject: Proptypes.func.isRequired,
  selectedProject: Proptypes.string.isRequired,
};

我遇到的问题是，当我自己的 selectedProject 属性更改值时，renderProjectList 不会再次执行。 render 方法显然确实被触发了，但是由于 QueryRenderer 的任何属性都没有改变，renderProjectList 也没有被调用。

处理这个问题的最佳方法是什么？

Answer 1

我找到了一个解决方案，每次我注入的一个道具发生变化时，它都会成功地重新呈现我的列表组件（不执行 api 请求）。我必须在 render 函数中定义我的组件，以便我可以访问新的 prop 值。

作为功能组件的结果如下：

const ProjectQueryRenderer = ({ onSelectProject, selectedProject }) => {
  const comp = ({ error, props }) => {
    if (props) {
      return (
        <ProjectList
          connection={props.viewer.allProjects}
          onSelectProject={onSelectProject}
          selectedProject={selectedProject}
        />
      );
    }
  };
  return (
    <QueryRenderer
      environment={environment}
      query={ProjectsQuery}
      render={comp}
    />
  );
};

Answer 2

除了将渲染函数传递给QueryRenderer，您还可以将整个 ProjectList 组件作为属性以及该组件需要从父组件渲染的任何道具传递。他们额外的道具在QueryRenderer 中显示为other。见下文：

class ProjectQueryRenderer extends Component {
  render() {
    return (
      <QueryRenderer
        environment={environment}
        query={ProjectsQuery}
        component={ProjectList}
        onSelectProject={this.props.onSelectedProject}
        selectProject={this.props.selectedProject}
      />
    );
  }
}

ProjectQueryRenderer.propTypes = {
  onSelectProject: Proptypes.func.isRequired,
  selectedProject: Proptypes.string.isRequired,
};

现在是 QueryRenderer

class QueryRenderer extends Component {

  render() {
    const {environment, query, component, ...other} = this.props 

    // parameters to component that QueryRenderer computes
    // based on environment, query, etc...
    // plus also pass in all the extra props that are coming from
    // ProjectQueryRenderer (like onSelectProject)
    const computedProp = //something

    return (
     <div>
       <component computedProp={computedProp} {...other} />
     </div>
   )
  }
}

这样，ProjectQueryRenderer 和 QueryRenderer 都可以将 props 传递给任意组件到 QueryRenderer 中，您也可以在其他类型的组件中重用 QueryRenderer。