Meteor 流星，反应，这个。道具。孩子们什么也没表现出来_Meteor_Reactjs

Meteor 流星，反应，这个。道具。孩子们什么也没表现出来

meteor reactjs

Meteor 流星，反应，这个。道具。孩子们什么也没表现出来,meteor,reactjs,Meteor,Reactjs,我正在使用Meteor js，现在尝试开始使用React 我的问题是： “Hello”标记之间只有空格（应该是h1标题“Test”），这里有什么问题 React.html： <head> <title>react</title> </head> <body> <div id="hello"> <Hello>Test</Hello> </div> <div i

我正在使用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>

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

<body>
  <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>
    );
  }
});

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

MainLayout=React.createClass({
render（）{
返回(
这里的主要内容
);
}
});
Hello=React.createClass({
render（）{
返回(
{this.props.children}
);
}
});

如果我用任何字符串替换{this.props.children}，所有这些都可以正常工作

react.jsx：

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

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

if（Meteor.isClient）{
Meteor.startup（函数（）{
ReactDOM.render（，document.getElementById（“呈现目标”）；
render（，document.getElementById（“hello”）；
});
}

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

所有子组件都应该由其父组件呈现。在本例中，MainLayout是您的父组件，Hello是您的子组件

React.html：

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

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

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

<body>
  <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>
    );
  }
});

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

MainLayout=React.createClass({
render（）{
返回(
试验
);
}
});
Hello=React.createClass({
render（）{
返回(
{this.props.children}
);
}
});

react.jsx：

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

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

if（Meteor.isClient）{
Meteor.startup（函数（）{
ReactDOM.render（，document.getElementById（“呈现目标”）；
});
}

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

react.jsx

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

。。。
render（Test，document.getElementById（“hello”）；
...