使用 react.js 在其他组件中渲染组件答案

【问题标题】：Render components inside other components with react.js使用 react.js 在其他组件中渲染组件
【发布时间】：2015-06-01 17:58:51
【问题描述】：

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

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

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

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

【问题讨论】：

具体是什么问题？你应该能够做到这一点。
您遇到什么类型的错误？

标签： javascript reactjs

【解决方案1】：

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

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

【讨论】：

【解决方案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.

【讨论】：