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

Render components inside other components with react.js

本文关键字：组件 内部 其他 react js 使用      更新时间：2023-09-26

我在弄清楚如何将react组件渲染为服务器端其他组件中的子组件时遇到了一些困难。在我的index.js文件的客户端，我会做一些类似的事情：

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

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

我想做的是有一个可重复使用的面板组件（它包括一个切换可见性的按钮），我可以把任何内容/组件放在里面。

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

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

我弄清楚了我认为最终应该做什么，或者至少是什么解决了我的问题。代码：

  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.
相关文章：