我可以通过 props.children React JS 将道具传递给孩子吗

Posted

技术标签:

【中文标题】我可以通过 props.children React JS 将道具传递给孩子吗【英文标题】:Can I pass props to the children via props.children React JS 【发布时间】:2017-02-01 23:42:16 【问题描述】:

因此,如果我有一个带有渲染方法的组件,它调用 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,因为这就是呈现给页面的内容。

【问题讨论】:

【参考方案1】:

是的,您需要做的就是使用您想要的其他道具克隆元素。像这样。

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

【讨论】:

以上是关于我可以通过 props.children React JS 将道具传递给孩子吗的主要内容,如果未能解决你的问题,请参考以下文章

ReactJS:为啥要使用 this.props.children?

如何将道具传递给 this.props.children

如何将道具传递给 this.props.children

反应路由器和 this.props.children - 如何将状态传递给 this.props.children

React8 props的children校验默认值

React8 props的children校验默认值