问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

React - 未捕获的不变违规：

社区维基
1
新手上路，请多包涵

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

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

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

 <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 转换问题？或任何其他事情？

原文由 MrWeb 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptreactjs
阅读 243
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

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

      </div>;
  }
});

原文由 Daniel A. White 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

我不知道你使用的是哪个版本的 React，因为我知道如果 JSX 语法没有用 () 包裹，一些旧版本会出错。尝试在 MyComponent 的 render 方法上执行此操作：

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

原文由 modernator 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题