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

Question

我在弄清楚如何将反应组件呈现为服务器端其他组件内的子组件时遇到了一些问题。在我的 index.js 文件的客户端，我会做类似的事情：

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

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

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

Answer 1

在服务器上，React.{renderToString,renderToStaticMarkup} 返回的标记是您的组件在 first 渲染上的 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 在其他组件中渲染组件

Render components inside other components with react.js

javascript

reactjs