如何將自定義道具傳遞給QueryRenderer渲染函數？

鑑於以下QueryRenderer組件：如何將自定義道具傳遞給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也沒有被調用。

處理這個問題的最佳方法是什麼？

來源

2017-08-19 nickdecooman

除了將渲染函數傳遞給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將其他類型的組件也是如此。

來源

2017-08-19 21:08:56 aherriot

不知道我正確地理解這一點。上面的例子給出了一個'Uncaught TypeError：this.props.render不是函數錯誤。 – nickdecooman

我將'render'道具名稱更改爲'component'，但由您自己決定合適的名稱。也許我的解決方案並不完全是你要找的。我正在看着它，我正在工作。「ProjectList」是否依賴於來自'ProjectQueryRenderer'和'QueryRenderer'的屬性？如果是這樣，這個問題還有另一種解決方案。 – aherriot

我發現了一個解決方案，可以在每次我的一個注入道具發生變化時成功提交我的列表組件（不執行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-20 06:16:59 nickdecooman

這種方法的缺點是每次需要渲染'ProjectQueryRenderer'時都會爲'comp'函數創建一個新的定義。 – aherriot

如何將自定義道具傳遞給QueryRenderer渲染函數？

回答

相關問題