Question

我正在使用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"));
  });
}

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

Answer 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"));
  });
}

Answer 2

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

react.jsx

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

流星，反应，this.props.children什么都没显示

2 个答案: