2

给定以下 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方法显然确实被触发了，但是由于没有任何 propsQueryRenderer被更改，renderProjectList因此也没有被调用。

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

4

2 回答 2

0

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 和其他类型的组件。

于 2017-08-19T21:08:56.817 回答
0

我找到了一个解决方案，每次我注入的道具之一发生变化时，它都会成功地重新呈现我的列表组件（不执行 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}
    />
  );
};
于 2017-08-20T06:16:59.097 回答