问如何快速地将道具转移到最深的组件？

EN

// my-react-components.js file

var FooBox = React.createClass({
    render: function() {
        return (
            <div>
                // here I pass 'units'
                <FooList data={this.props.data} units={this.props.units}>
            </div>
        );
    }
});

var FooList = React.createClass({
    render: function() {
        return (
            <div>
                // and here I pass 'units'
                <Foo myId={this.props.data[0]} units={this.props.units} />
            </div>
        );
    }
});

var Foo = React.createClass({
    render: function() {
        var units = this.props.units;  // and only here I use `units`
        return (
            // only here I need `units`
            <div dangerouslySetInnerHTML={{__html: units[this.props.myId].name}}>
            </div>
        );
    }
});

var React = require('react');
var ReactDOMServer = require('react-dom/server');
var FooBox = require('../my-react-components.js');

var data = [...some data here...];
var units = {name: 'example.com'}; // this is my 'units' object

var html = ReactDOMServer.renderToString(React.createElement(FooBox, {
    data: result,
    units: units // so 'units' comes yet from here
}));