Question

我正在尝试打印反应组件的道具但收到错误。请帮忙：

代码段

<!-- DOCTYPE HTML -->
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
    <script src="http://fb. me/JSXTransformer-0.12.1.js"></script>
    <!-- gap above is intended as else stackOverflow not allowing to post -->
</head>
<body>

    <div id="div1"></div>

    <script type="text/jsx">

        //A component
        var George = React.createClass({
            render: function(){
                return (
                    <div> Hello Dear!</div>
                    <div>{this.props.color}</div>
                );
            }
        });

        ReactDOM.render(<George color="blue"/>, document.getElementById('div1'));

    </script>
</body>
</html>

我期待“亲爱的你好！”然后下一行“蓝色”。但是，我收到了这个错误。

错误：

Answer 1

React v16及更高版本

从React v16开始，React组件可以返回一个数组。这在v16之前是不可能的。

这样做很简单：

return ([  // <-- note the array notation
  <div key={0}> Hello Dear!</div>,
  <div key={1}>{this.props.color}</div>
]);

请注意，您需要为数组的每个元素声明一个键。根据官方消息来源，这个可能在React的未来版本中变得不必要了，但现在还没有。另外，请不要忘记将数组中的每个元素与,分开，就像通常使用数组一样。

React v15.6及更早版本

React Components只能返回一个表达式，但您尝试返回两个<div>元素。

别忘了render()函数就是一个函数。函数总是包含许多参数，并始终返回一个值（除非无效）。

很容易忘记，但你正在编写JSX而不是HTML。 JSX只是javascript的语法糖。因此，一个元素将被翻译为：

React.createElement('div', null, 'Hello Dear!');

这提供了一个React元素，您可以从render()函数返回，但不能单独返回两个元素。而是将它们包装在另一个具有这些div s作为子项的元素中。

来自official docs：

<强>警告：

组件必须返回单个根元素。这就是我们添加<div>以包含所有<Welcome />元素的原因。

尝试将这些组件包装在另一个组件中，以便只返回一个：

 //A component
    var George = React.createClass({
        render: function(){
            return (
              <div>
                <div> Hello Dear!</div>
                <div>{this.props.color}</div>
              </div>
            );
        }
    });

    ReactDOM.render(<George color="blue"/>, document.getElementById('div1'));

Answer 2

问题是你从render方法返回多个html元素，在这里：

return (
      <div> Hello Dear!</div>
      <div>{this.props.color}</div>
);

React v16 +解决方案：

React 16包含一个新元素React.Fragment，借助于我们可以包装多个元素，并且不会为Fragment创建任何dom节点。像这样：

return (
      <React.Fragment> 
            Hello Dear!
            <div>{this.props.color}</div>
      </React.Fragment>
);

或返回一个数组：

return ([
            <p key={0}>Hello Dear!</p>
            <div key={1}>{this.props.color}</div>
]);

React v＆lt; 16：

将包装div中的所有元素包装起来，如下所示：

return ( <div> Hello Dear! <div>{this.props.color}</div> </div> );

原因：React组件不能返回多个元素，但单个JSX表达式可以有多个子节点，您只能返回一个节点，所以如果有，则列表要返回divs，必须将组件包装在div，span或任何其他组件中。

还有一件事，你需要包括babel的引用，在header中使用这个引用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>

检查工作示例：

<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>  </head> <body> <div id="div1"></div> <script type="text/jsx"> var George = React.createClass({ render: function(){ return ( <div> Hello Dear! <div>{this.props.color}</div> </div> ); } }); ReactDOM.render(<George color="blue"/>, document.getElementById('div1')); </script> </body> </html>

Answer 3

使用 React 16 ，我们可以将render中的多个组件作为数组返回（没有父div）。

return ([
    <div> Hello Dear!</div>,
    <div>{this.props.color}</div>
]);

Answer 4

将返回的DOM包装在一个html元素中。

试试这个

return (
    <div>            
        <div> Hello Dear!</div>     
        <div>{this.props.color}</div>
    </div>     
);

Answer 5

return (  <div>
                <div> Hello Dear!</div>
                <div>{this.props.color}</div>
         </div>
            );

嗨，返回内部的元素应该被某些东西包裹起来。只需添加如上所示，并应该工作;）

Answer 6

Render函数应该只返回一个根元素试试这个

//组件

var George = React.createClass({
        render: function(){
            return (
                <div>
                <div> Hello Dear!</div>
                <div>{this.props.color}</div>
                </div>
            );
        }
    });

Answer 7

实际上你的问题是你试图同时渲染几个元素，而这个版本的反应是不可能的，

<强>原因渲染它是一个函数，本质上函数只返回一个值

但是 react-fiber 你可以做你做的事情，纠正你的问题有两个解决方案：

对两个元素使用包装

    var George = React.createClass ({
         render: function () {
           return (
                <div>
                  <div> Hello Dear! </div>
                  <div> {this.props.color} </div>
                <div>
               );
           }
    });

ReactDOM.render(<George color = "blue" />, document.getElementById ('div1'));

第二个解决方案是返回一个包含两个元素的数组

var George = React.createClass ({
      render: function () {
          return ([
              <div key='0'> Hello Dear! </div>,
              <div key='1'> {this.props.color} </ div>
          ]);
      }
});

ReactDOM.render (<George color = "blue" />, document.getElementById ('div1'));

Answer 8

将您在return语句中使用的所有内容包含在另一个div标记内。

render: function(){
            return (
                <div>
                    <div> Hello Dear!</div>
                    <div>{this.props.color}</div>
                </div>
            );
        }

错误：相邻的JSX元素必须包装在封闭标记中

8 个答案:

React v16及更高版本

React v15.6及更早版本