如何將自定義道具傳遞到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更改值時，不會再次執行renderProjectList 。 render方法顯然會被觸發，但是由於QueryRenderer任何renderProjectList都沒有改變，因此renderProjectList也不會被調用。

處理此問題的最佳方法是什么？

Answer 1

無需將渲染函數傳遞給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都可以將道具傳遞到QueryRenderer中的任意組件中，並且您還可以將QueryRenderer與其他類型的組件一起重用。

Answer 2

我找到了一個解決方案，該解決方案可以在每次注入的道具之一發生更改時成功重新渲染列表組件（無需執行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}
    />
  );
};