javascript - 组件未加载到另一个组件中

Question

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)。您可能返回了未定义的数组或其他无效对象。

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