props.children을 통해 소품을 전달할 수 있습니다. React JS

Question

자식을 렌더링하기 위해 this.props.children을 호출하는 렌더링 메소드가있는 구성 요소가있는 경우 부모로부터 자식으로 소품을 전달할 수 있습니까? 그 렌더링하려고?

export default class SceneHandeling extends Component { 

    constructor(props) { 
    super(props) 
    } 

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

는 우리가 할 것은 현장 관리자의 장면을 하나의 렌더링이지만,로 우리가 볼 수

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

같은 사용 :

예를 들어

는 다음을 고려 장면 관리자 구성 요소에는 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); 
}