Wie übergeben Sie benutzerdefinierte Requisiten in die QueryRenderer-Renderfunktion?

Question

Angesichts der folgenden QueryRenderer Komponente: wenn meine eigene selectedProject prop ändert Wert

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

Das Problem, das ich habe ist, dass renderProjectList nicht wieder ausgeführt wird. Die render Methode wird offensichtlich ausgelöst, aber da keine der Requisiten von QueryRenderer geändert wird, wird auch renderProjectList nicht aufgerufen.

Was ist der beste Ansatz, um damit umzugehen?

Answer 1

Anstatt eine Renderfunktion in QueryRenderer zu übergeben, können Sie die gesamte ProjectList-Komponente zusammen mit allen Requisiten, die von der übergeordneten Komponente gerendert werden müssen, als Eigenschaft übergeben. Sie zusätzliche Requisiten erscheinen in QueryRenderer als other. Siehe unten:

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

und jetzt 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> 
    ) 
    } 
} 

Auf diese Weise sowohl ProjectQueryRenderer und QueryRenderer können Requisiten in einer beliebigen Komponente in QueryRenderer passieren und Sie können wiederverwendet werden QueryRenderer werden andere Arten von Komponenten als auch.

Answer 2

Ich fand eine Lösung, die erfolgreich meine List-Komponente wiederholt (ohne eine API-Anfrage) jedes Mal, wenn eine meiner injizierten Requisiten sich ändert. Ich musste meine Komponente in der Funktion render definieren, damit ich auf die neuen Prop-Werte zugreifen konnte.

unter dem Ergebnis als funktionale Komponente:

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