组件未加载到另一个组件中答案

【问题标题】：Component doesn't load in another component组件未加载到另一个组件中
【发布时间】：2017-03-02 00:01:49
【问题描述】：

var HelloMessage = React.createClass({
render:function() {
    return
        <h2>{this.props.message}</h2>
} });

var HelloReact = React.createClass({
getInitialState:function(){
    return {message:'default'}
}, 
updateMessage:function(){
   console.info('UpdateMessge');
   this.setState({message:this.refs.messageTextBox.value});
   },
render:function(){
 return <div>
             <HelloMessage message='Hello React'/>
             <input type='text' ref='messageTextBox'/>
             <button onClick={this.updateMessage}>Update</button>
              <div>{this.state.message}</div>
        </div>
}
});

我无法在 HelloReact 组件中加载 HelloMessage 组件。以下是我在浏览器控制台中遇到的错误

未捕获的错误：HelloMessage.render()：必须返回有效的 React 元素（或 null）。您可能返回了未定义、数组或其他一些无效对象。

【问题讨论】：

我恳请您采用一种模糊标准的支撑样式，并与您的支撑和缩进保持一致，至少在提问时是这样。以上内容几乎无法阅读。
自动分号插入。删除HelloMessage 中return 和<h2> 之间的新行，因为它不会返回任何内容。

标签： javascript reactjs

【解决方案1】：

换行有时在 JavaScript 中很重要（记住，JSX 只是 JavaScript），这要归功于自动分号插入的恐怖。其中最臭名昭著的是：return 之后的换行符。您的渲染没有返回任何内容，因为 ASI 在 return 之后插入了 ;：

var HelloMessage = React.createClass({
render:function() {
    return; // <============================== here
        <h2>{this.props.message}</h2>
} });

从不在return 之后和返回的东西之前放置换行符。将h2 放在同一行：

var HelloMessage = React.createClass({
render:function() {
    return <h2>{this.props.message}</h2>
} });

...或使用() 来防止 ASI 弄乱您的代码：

var HelloMessage = React.createClass({
render:function() {
    return (
        <h2>{this.props.message}</h2>
    );
} });

【讨论】：

【解决方案2】：

在您的变体中，HelloMessage 有空返回，因为您换行 return <h2>{this.props.message}</h2>

var HelloMessage = React.createClass({
render:function() {
    return
        <h2>{this.props.message}</h2>
} });

Javascript 具有带分号的自动完成功能，而您拥有 return ;

改成

var HelloMessage = React.createClass({
render:function() {
    return <h2>{this.props.message}</h2>
} });

【讨论】：