流星，反应，this.props.children 什么也没显示答案

【问题标题】：Meteor, react, this.props.children shows nothing流星，反应，this.props.children 什么也没显示
【发布时间】：2026-01-21 04:50:02
【问题描述】：

我正在使用 Meteor js，现在尝试开始使用 React。

我的问题： 'Hello' 标签之间只有空格（应该是 h1 标头 'Test'），这里有什么问题？

React.html：

<head>
  <title>react</title>
</head>

<body>
  <div id="hello">
    <Hello>Test</Hello>
  </div>
  <div id="render-target"></div>
</body>

App.jsx：

MainLayout = React.createClass({
  render() {
    return (
      <div>
        <p>main content here..</p>
      </div>
    );
  }
});
Hello = React.createClass({
  render() {
    return (
      <div className="hello">
        <h1>{this.props.children}</h1>
      </div>
    );
  }
});

如果我用任何字符串替换 {this.props.children}，一切正常。

react.jsx：

if (Meteor.isClient) {
  Meteor.startup(function () {
    ReactDOM.render(<MainLayout />, document.getElementById("render-target"));
    ReactDOM.render(<Hello />, document.getElementById("hello"));
  });
}

我的根目录中只有这三个文件。

【问题讨论】：

标签： meteor reactjs

【解决方案1】：

所有子组件都应该由它们的父组件渲染。在这种情况下，MainLayout 是您的父组件，Hello 是您的子组件。

React.html：

<head>
  <title>react</title>
</head>

<body>
  <div id="render-target"></div>
</body>

App.jsx：

MainLayout = React.createClass({
  render() {
    return (
      <div>
        <Hello>Test</Hello>
      </div>
    );
  }
});
Hello = React.createClass({
  render() {
    return (
      <div className="hello">
        <h1>{this.props.children}</h1>
      </div>
    );
  }
});

react.jsx：

if (Meteor.isClient) {
  Meteor.startup(function () {
    ReactDOM.render(<MainLayout />, document.getElementById("render-target"));
  });
}

【讨论】：

【解决方案2】：

或者更接近您的原始代码，您只需要在您要呈现的标签中指定子项，而不是您要替换的主机 html：

react.jsx

...
ReactDOM.render(<Hello>Test</Hello>, document.getElementById("hello"));
...

【讨论】：