Question

我在查找如何渲染反应组件方面遇到了一些麻烦，就像服务器端的其他组件中的子项一样。在我的index.js文件的客户端，我会做类似的事情：

React.render(
  <Panel title="Full Time Score">
    <Graph />
  </Panel>, document.getElementById('column-main') 
);

但是在服务器端我没有运气，是否有可能做到这样的事情？或者这是一种反模式，我应该始终从一个父组件开始。

我要做的是拥有一个可重复使用的面板组件（它包含一个切换可见性的按钮），我可以将任何内容/组件放入其中。

Answer 1

在服务器上，React.{renderToString,renderToStaticMarkup}返回的标记是第一个渲染中组件的HTML输出。在客户端上，组件可以在componentDidMount生命周期方法触发后重新呈现。

确保Panel组件在第一次渲染时呈现其children道具。

Answer 2

我想出了我认为我到底应该做些什么，或者至少解决了我的问题。代码：

  var Panel = require('../components/panel.react.jsx');
  var Dataset = require('../components/dataset.probability.react.jsx');

  // Main Column HTML
  var html = React.renderToStaticMarkup(React.DOM.div(null,
    Panel(
      {title:"Title of panel"},

      Graph({data: data})
    ),
    Panel(
      {title:"Title of panel"}

      Graph({data: data})
    ),
    Panel(
      {title:"Title of panel"}

      Graph({data: data})
    )
  ));

  // var html now contains the markup, send it to your template.

使用react.js在其他组件内渲染组件

2 个答案: