Question

我的应用程序有很多不同的页面（复合组件？），它们包含构成页面的各种分立组件。我希望能够在每个离散组件上运行静态函数，但我只能引用一个复合页面。

有没有办法在服务器端呈现页面并保持对页面中包含的每个组件的某种引用（递归）？我想象一个类似于Node.js需求图的类比，它是在编译模块时构建的。

我知道我可以使用refs在顶层执行此操作，但这不起作用，因为我最终需要引用refs。

这个小提琴是我的组件的基本模型。但是，在我的项目中，我甚至没有顶级裁判。

var Goodbye = React.createClass({
    statics: {
        serverSideMethod: function() {
            console.log('ya, server');
        }
    },
    render: function() {
        return <div className="goodbye">Goodbye {this.props.name}</div>;
    }
});

var Hello = React.createClass({
    componentDidMount: function(){
        console.log('will mount', this.refs);
    },

    render: function() {

        return (
            <div>
                Hello {this.props.name}
                <Goodbye name="cruel world" ref="g1"/>
                <Goodbye name="cruel world" ref="g2"/>
            </div>
        )
    }
});

React.render(<Hello name="World"/>,document.getElementById('container'));

https://jsfiddle.net/69z2wepo/12471/

实际上，我只通过react-router引用了顶级组件。理想情况下，我希望能够以递归方式调用每个子节点上的静态。但是，没有子节点，因为它们不会传递到渲染中，而是包含在页面中。

Here's some more context of what this looks like in my express router

and my related unanswered question.

我承认我可能会犯这个错误，所以假设我有一个静态的，我需要在页面中的每个子组件上（递归地）触发关于更好方法的任何想法吗？

我的最终目标是收集我在模块中定义的所有私有css字符串，并将它们键入对象中，然后在渲染整个页面之前将它们写入头部。感谢。

如何获取React服务器端呈现中的所有子组件的图形

0 个答案: