Question

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

Uncaught Invariant Violation：MyComponent.render（）：有效的React 必须返回element（或null）。你可能已经返回undefined，数组或其他一些无效对象。

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

这可能是一个jsx转型问题？还是其他任何东西？

Answer 1

您可能会在return之后点击JavaScripts自动分号插入。只需删除div之前的换行符。

var MyComponent = React.createClass({
  render: function() {
    return <div> // Change this line
        <h1>{this.props.text}</h1>

      </div>;
  }
});

Answer 2

只需将渲染功能更改为

即可

var MyComponent = React.createClass({
  render: function() {
    return (
      <div>
        <h1>{this.props.text}</h1>    
      </div>
    );
  }
});

丹尼尔的建议也是正确的。

Answer 3

我不知道你正在使用哪个版本的React，因为我知道如果JSX语法没有包含（），一些旧版本会出错。尝试在MyComponent的渲染方法上执行此操作：

render: function() {
    return (
      <div>
        <h1>{this.props.text}</h1>
      </div>
    );
  }

React - Uncaught Invariant Violation：

3 个答案: