Question

我在服务器上渲染React。

我有三个组件的共同链。我需要将units对象（只是简单的js对象{name: 'example.com'}）传递给最外层组件<Foo />中链中最深的组件<FooBox />。现在，我必须将unit对象作为this.props.units传递给每个组件。我看起来不漂亮，看起来对我来说是一种不好的做法：

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

在服务器端，我的代码如下（一个Node.js应用程序）：

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

我的问题是：

这是units中获取<Foo />的唯一方法吗？只能将它作为props传递给整个链？有没有办法让units <Foo />更容易，避免一步一步props传递？

Answer 1

您可以使用上下文而不是props.It允许您通过组件树传递数据，而无需在每个级别https://facebook.github.io/react/docs/context.html手动向下传递道具

Answer 2

快速传递{...this.props}。为了清晰的逻辑，我认为我们必须将其传递下去

Answer 3

在我看来，在组件层次结构树中重新声明和重新分配相同属性的程度是React的一个更令人恼火的特性。可以说这是一个优势：数据流是明确的，使您的应用程序易于推理。但就我个人而言，我发现这种重复是令人不快的。

正如vistajess所提到的，当然，上下文是一种解决方案。但我不愿意投入大量实验API。

另一种解决方案是使用Flux并将存储侦听器分布在不同的组件中。（例如，在Redux中，这些将成为受影响的组件。）当然，这会增加组件的复杂性。

或者最后你可以咧嘴笑着忍受它。（这通常就是我所做的。）不断重新输入相同的属性可能很烦人，但就代码气味而言，它很小。还要记住，React仍然相当新，其API正在迅速发展。及时，肯定会采用一些解决这个问题的方法。（也许上下文的主流化？）目前，React的弱点远远超过它的优势这一事实让我感到安慰。

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

3 个答案: