Comment passer des props personnalisées dans la fonction render QueryRenderer?

Question

Étant donné le composant QueryRenderer suivant :

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

  renderProjectList({ error, props }) {
    if (props) {
      return (

      );
    }
  }

  render() {
    return (

    );
  }
}

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

Le problème que j'ai est que renderProjectList n'est pas exécuté à nouveau lorsque ma propre propriété selectedProject change de valeur. La méthode render est évidemment déclenchée, mais comme aucune des propriétés de QueryRenderer n'est modifiée, renderProjectList n'est pas invoqué non plus.

Quelle est la meilleure approche pour gérer cela ?

Answer 1

Plutôt que de passer une fonction de rendu dans QueryRenderer, vous pouvez passer l'intégralité du composant ProjectList en tant que propriété ainsi que toutes les props nécessaires au rendu de ce composant depuis le parent. Les props supplémentaires apparaissent dans QueryRenderer sous le nom de other. Voir ci-dessous :

class ProjectQueryRenderer extends Component {
  render() {
    return (

    );
  }
}

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

et maintenant QueryRenderer

class QueryRenderer extends Component {

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

    // paramètres à passer au composant que QueryRenderer calcule
    // en fonction de l'environnement, de la requête, etc...
    // en plus de passer toutes les props supplémentaires provenant de
    // ProjectQueryRenderer (comme onSelectProject)
    const computedProp = //quelque chose

    return (

   )
  }
}

De cette manière, à la fois ProjectQueryRenderer et QueryRenderer peuvent transmettre des props à un composant arbitraire dans QueryRenderer et vous pouvez réutiliser QueryRenderer avec d'autres types de composants également.

Answer 2

J'ai trouvé une solution qui permet de réafficher avec succès le composant de ma liste (sans effectuer de requête api) à chaque fois qu'une de mes props injectées change. J'ai dû définir mon composant dans la fonction render afin de pouvoir accéder aux nouvelles valeurs de prop.

Voici le résultat en tant que composant fonctionnel :

const ProjectQueryRenderer = ({ onSelectProject, selectedProject }) => {
  const comp = ({ error, props }) => {
    if (props) {
      return (

      );
    }
  };
  return (

  );
};