深度传递props的三种正确方式：

1) 实际上只是将它们从每个组件向下传递到下一个组件（这是最易读的（就代码逻辑而言），但是一旦您有太多props要传递并且树中有很多级别，就会变得笨拙。

例子：

import React from 'react';    

var GrandParent = React.createClass({
  render () {
    return (
      <Parent familyName={'componentFamily'} />
    );
  }
});

var Parent = React.createClass({
  render () {
    return (
      <Child familyName={props.familyName} />
    );
  }
});

var Child = React.createClass({
  render () {
    return (
      <p>{'Our family name is ' + props.familyName}</p>
    );
  }
});

2）使用Flux风格的 store（我更喜欢Reflux，虽然Redux现在风靡一时）来保持一个共同的状态。然后所有组件都可以访问该存储。至少对我来说，这是当前的首选方法。很清楚，它将业务逻辑排除在组件之外。

示例（使用回流）：

import React from 'react';
import Reflux from 'reflux';

var MyStore = Reflux.createStore({
  // This will be called in every component that connects to the store
  getInitialState () {
    return {
      // Contents of MyFormSchema here
    };
  }
});

var Input = React.createClass({
  propTypes: {
    name: React.PropTypes.string.isRequired
  },
  mixins: [Reflux.connect(MyStore)],
  render () {
    // I don't know what MyFormSchema so I'm generalizing here, but lets pretend its a map that uses the name of each field a key and then has properties of that field within the map stored at the key/value
    return (
      <input type={this.state[name].type} name={this.props.name} value={this.state[name].type} />
    );
  }
});

3) 使用 React 的上下文特性。正如您从文档中立即看到的那样，此功能仍在开发中，可能会在 React 的未来版本中进行更改甚至删除。因此，虽然这可能是将 props 传递给组件树的最简单方法，但我个人会远离它，直到它成为更多的最终功能。

我不打算为此写一个例子，因为文档说得很清楚。但是，请确保向下滚动文档页面并查看Parent-child Coupled，这就是您现在正在做的事情。

另一个解决方案是，与其使用一个单独的组件来渲染Form及其Inputs，不如像目前那样将 prop 传递给 Form，然后简单地Input使用Form's渲染个体render()。

你可以这样使用 react-addons-clone-with-props 包：

import React, { Component } from 'react';
import cloneWithProps from 'react-addons-clone-with-props';

// ...

class Form extends Component {
  recursivelyMapChildren(children) {
    return React.Children.map(children, child => {
      if (!React.isValidElement(child)) {
        return child;
      }

      return React.cloneElement(child, {
        ...child.props,
        children: this.recursiveCloneChildren(child.props.children)
      });
    })
  }

  render() {
    return (
      <form>{this.recursivelyMapChildren(this.props.children)}</form>
    );
  }
}

代码的作用：

1. 通过预定义的childrenprop获取所有子组件（请参阅文档）。
2. 使用React.Children.map方法递归映射子集合，将 lambda 函数应用于每个元素。
3. 将映射的（即更新的，但未突变的！）子元素保存为mappedChildren常量。
4. 将它们放在formDOM 元素中。

看起来很简单，应该如此。

但是你必须记住，当你的代码保持干净和透明时，React 很棒。当你明确地传递props时

<Form
  schema={MyFormSchema}
>
   <Input
     name="name"
     schema={MyFormSchema} />
   <Input
     name="age"
     schema={MyFormSchema} />
</Form>

当您不小心更改了底层逻辑时，破坏的事情就会少很多。

谢谢你。学分@Rishat Muhametshin

我已经使用上述方法创建了一个可重用的方法。这很好用：

实用程序/递归MapChildren.jsx

const recursivelyMapChildren = (children, addedProperties) => {

        return React.Children.map(children, child => {
            if (!React.isValidElement(child)) {
                return child;
            }

            return React.cloneElement(child, {
                ...child.props,
                ...addedProperties,
                children: this.recursivelyMapChildren(child.props.children, addedProperties)
            });
        })
 };
export default recursivelyMapChildren;

用例：

表单.jsx

import recursivelyMapChildren from 'utils/recursivelyMapChildren';
class Form extends Component {

    handleValidation(evt, name, strValidationType){
/* pass this method down to any nested level input field */
    }

    render(){

        return (
            <form>
                {recursivelyMapChildren(this.props.children, {
                    handleValidation: this.handleValidation.bind(this)
                })}

                <input type="submit" value="submit" className="validation__submit"/>
            </form>
        )
    }
}
export default Form

SomeExample.jsx

const SomeExample = () => {
    return (
        <Form>
            <input type="hidden" name="_method" value="PUT"/>
            <fieldset>
                <legend>Personal details</legend>
                <div className="formRow">
                    <InputText/>    {/* This component will receive the method - handleValidation, so it is possible to update the state on the nested grand parent - form */}      
                </div>
                <div className="formRow">
                    <InputText/>{/* This component will receive the method - handleValidation, so it is possible to update the state on the nested grand parent - form */}  
                </div>  
            </fieldset>
        </Form>
    )
}

export default SomeExample;

我有一个替代解决方案将props传递给嵌套的孩子。函数 createFormComponents 接受模式并生成一个组件对象，该对象将像往常一样接收props，但已经提供了模式。您可以将我的示例中的 FormContainer 链接到一个商店或使用 setState 来处理随着时间的推移对架构的更改，并且子项将正确更新。

该示例的输出是到控制台以证明 props 已按预期接收。

function Form_(props) {
    console.log('Form props', props)
    return <div>{props.children}</div>
}

function Input_(props) {
    console.log('Input props', props)
    return <div />
}

function createFormComponents(schema) {
    return {
        Form: props => {
            return Form_({ ...props, schema })
        },

        Input: props => {
            return Input_({ ...props, schema })
        },
    }
}

const FormContainer = React.createClass({
    render: function() {
        const myFormSchema = { x: 0, y: 1, z: 2 }
        const {
            Form,
            Input,
        } = createFormComponents(myFormSchema)

        return (
            <Form>
                <Input name="name" />
                <Input name="age" />
            </Form>
        )
    }
})

ReactDOM.render(
    <FormContainer />,
    document.getElementById('container')
)

小提琴：props示例