我可以通過props.children將道具傳遞給孩子嗎React JS

Question

所以如果我有一個渲染方法的組件調用this.props.children渲染出任何孩子，我可以將任何道具從父項傳遞給孩子它試圖渲染？

例如，請考慮以下幾點：

import React, { Component } from 'react'; 
import CoreSceneManager  from '../engine/scene_manager'; 

export default class SceneManager extends Component { 

    constructor(props) { 
    super(props); 
    this._sceneManager = new CoreSceneManager(); 
    } 

    componentWillMount() { 
    this._sceneManager.registerScenes(this.props.children); 
    } 

    componentWillUnmount() { 
    this._sceneManager.exit(); 
    } 

    render() { 
    return(
     <div> 
     {this._sceneManager.getCurrentScene()} 
     </div> 
    ); 
    } 
} 

這樣使用：

export default class SceneHandeling extends Component { 

    constructor(props) { 
    super(props) 
    } 

    render() { 
    return(
     <Loop> 
     <SceneManager> 
      <ExampleSceneA /> 
      <ExampleSceneB /> 
     </SceneManager> 
     </Loop> 
    ); 
    } 
} 

我們做的是使只在現場管理中的一個場景，但是我們可以看到在場景管理器組件中，我有一個名爲this._sceneManager的「私有變量」。

我想通過這個給孩子們，在這種情況下，ExampleSceneB，因爲那是什麼被呈現給頁面。

Answer 1

是的，你需要做的就是用你想要的其他道具克隆這個元素。喜歡這個。

componentWillMount() { 
    const childrenWithProps = React.Children.map(this.props.children, 
     (child) => React.cloneElement(child, { 
      sceneManager: this._sceneManager 
     }) 
    ); 
    this._sceneManager.registerScenes(childrenWithProps); 
}