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

Question

我在弄清楚如何渲染 react 组件时遇到了一些麻烦，就像服务器端其他组件中的子组件一样。在客户端的 index.js 文件中，我会执行以下操作:

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

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

我想做的是拥有一个可重用的面板组件(它包括一个切换可见性的按钮)，我可以在其中放入任何内容/组件。

Answer 1

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

确保 Panel 组件在第一次渲染时渲染其 children 属性。