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）。您可能已经返回了undefined，数组或其他一些无效对象。

Answer 1

在您的变体中，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>
} });

Answer 2

在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 个答案: