Javascript React-未捕获不变冲突：_Javascript_Reactjs

Javascript React-未捕获不变冲突：

javascript reactjs

Javascript React-未捕获不变冲突：,javascript,reactjs,Javascript,Reactjs,当我在浏览器上运行代码时，收到此错误消息未捕获不变冲突：MyComponent.render（）：有效的元素（或null）必须返回。您可能返回了未定义的，数组或其他无效对象我使用Atom作为代码编辑器，并在chrome web服务器上运行。这是我的密码 <body> <div id="react-comp"></div> <script type="text/babel"> var MyComponent = React.cre

当我在浏览器上运行代码时，收到此错误消息

未捕获不变冲突：MyComponent.render（）：有效的元素（或null）必须返回。您可能返回了未定义的，数组或其他无效对象

我使用Atom作为代码编辑器，并在chrome web服务器上运行。这是我的密码

<body>
<div id="react-comp"></div>
  <script type="text/babel">
    var MyComponent = React.createClass({
      render: function() {
        return
          <div>
            <h1>{this.props.text}</h1>

          </div>;
      }
    });

    ReactDOM.render(
      <div>
        <MyComponent text="Hello World"/>
        <MyComponent text="Hello"/>
      </div>  
    , document.getElementById('react-comp'));


  </script>
</body>


var MyComponent=React.createClass({
render:function（）{
返回
{this.props.text}
;
}
});
ReactDOM.render(
，document.getElementById（'react-comp'）；

这可能是一个jsx转换问题？还是别的什么

您可能在

返回后点击了JavaScripts自动分号插入。只需在div之前删除换行符
var MyComponent = React.createClass({
  render: function() {
    return <div> // Change this line
        <h1>{this.props.text}</h1>

      </div>;
  }
});

var MyComponent=React.createClass({
render:function（）{
return//更改此行
{this.props.text}
;
}
});
只需将渲染功能更改为
var MyComponent = React.createClass({
  render: function() {
    return (
      <div>
        <h1>{this.props.text}</h1>    
      </div>
    );
  }
});

var MyComponent=React.createClass({
render:function（）{
返回(
{this.props.text}
);
}
});

Daniel的建议也是正确的。我不知道您使用的是哪个版本的React，因为我知道如果JSX语法没有用（）包装，一些旧版本会出错。
尝试在MyComponent的渲染方法上执行此操作：
render: function() {
    return (
      <div>
        <h1>{this.props.text}</h1>
      </div>
    );
  }

render:function（）{
返回(
{this.props.text}
);
}
您可以使用非缩小版查看完整的错误消息。@杰克，现在我可以看到完整的错误消息了。说明已更新。现在工作正常！谢谢你的详细回答：）