Reactjs

Question

努力实现以下目标：

if(typeof window === 'undefined'){
    return React.renderToString(React.createFactory(AppComponent)());
}
React.render(<AppComponent component={component} />, document.body);

当通过 createFactory 方法放置组件时，我如何才能将 component 道具传递给组件？

编辑：

成功了：

renderApp: function(component){
    if(typeof window === 'undefined'){
        var appComponentFactory = React.createFactory(AppComponent);
        return React.renderToString(appComponentFactory({
            component: component
        }));
    }
    React.render(<AppComponent component={component} />, document.body);
}

Answer 1

如果您已经在为 React.render() 调用转译 JSX，则无需在工厂中越过重重障碍...

renderApp: function(component){
    var app = <AppComponent component={component}/>
    if (typeof window === 'undefined') {
      return React.renderToString(app);
    }
    React.render(app, document.body);
}

...因为它只是糖：

var app = React.createElement(AppComponent, {component: component})

这可能不适用，但如果您的 AppComponent 除了渲染给定的 component 道具之外什么都不做，您也可以直接渲染组件：

renderApp: function(Component) {
    var app = <Component/>
    if (typeof window === 'undefined') {
      return React.renderToString(app);
    }
    React.render(app, document.body);
}

...再次显示脱糖：

var app = React.createElement(Component)

Reactjs - 创建工厂，将道具传递给组件

Reactjs - create factory, passing props into component