javascript - 我可以通过 props.children React JS 将 props 传递给 children 吗

Question

因此，如果我有一个组件，其渲染方法调用 this.props.children 来渲染任何子组件，我可以将任何 Prop 从父组件传递给它尝试渲染的子组件吗？

例如，请考虑以下内容:

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 的“私有(private)变量”。

我想将其传递给子级，在本例中是ExampleSceneB，因为这就是渲染到页面的内容。

Answer 1

是的，您所需要做的就是使用您想要的附加 Prop 克隆元素。像这样。

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