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,
};

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

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

Answer 1

您可以将整个ProjectList组件作为属性传递给组件，而不是将渲染函数传递给QueryRenderer，而是将组件需要从父组件渲染。他们的额外道具在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以及其他类型的组件。

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}
    />
  );
};

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

2 个答案: