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

2022-01-21 00:00:00 reactjs javascript components

我正在尝试打印 react 组件的 props 但出现错误.请帮忙:

片段:

<html><头><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><!-- 上面的间隙是为了避免 stackOverflow 不允许发布 --></头><身体><div id="div1"></div><脚本类型="文本/jsx">//一个组件var George = React.createClass({渲染:函数(){返回 (
亲爱的你好！</div><div>{this.props.color}</div>);}});ReactDOM.render(<George color="blue"/>, document.getElementById('div1'));</脚本></身体></html>

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

错误:

解决方案

React v16 及更高版本

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

这样做很简单:

return ([//<--注意数组符号<div 键={0}>亲爱的你好！</div>,<div key={1}>{this.props.color}</div>]);

请注意，您需要为数组的每个元素声明一个键.根据官方消息，这可能在未来的 React 版本中变得不必要，但目前还没有.也不要忘记用 , 分隔数组中的每个元素，就像通常使用数组一样.

React v15.6 及更早版本

React 组件只能返回一个表达式，但你试图返回两个 <div> 元素.

不要忘记 render() 函数就是这样，一个函数.函数总是接受多个参数，并且总是准确地返回一个值(除非 void).

这很容易忘记，但是您正在编写 JSX 而不是 HTML.JSX 只是 javascript 的语法糖.所以一个元素将被翻译为:

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

这给出了一个 React 元素，你可以从 render() 函数中返回它，但你不能单独返回两个.相反，您将它们包装在另一个元素中，该元素将这些 div 作为子元素.

来自官方文档:

<块引用>

警告:

组件必须返回单个根元素.这就是为什么我们添加了一个 <div> 来包含所有 <Welcome/> 元素.

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

//一个组件var George = React.createClass({渲染:函数(){返回 (
亲爱的你好！</div><div>{this.props.color}</div></div>);}});ReactDOM.render(<George color="blue"/>, document.getElementById('div1'));

I am trying to print props of a react component but getting an error. Please help:

Snippet:

<!-- 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>

I am expecting "Hello Dear!" and then next line "blue". But, I am getting this error instead.

Error:

解决方案

React v16 and later

As of React v16 React components can return an array. This was not possible prior to v16.

Doing this is simple:

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

Note that you need to declare a key for each element of the array. According to official sources, this might become unnecessary in future versions of React, but not as of right now. Also don't forget to separate each element in the array with , as you would normally with an array.

React v15.6 and earlier

React Components can only return one expression, but you are trying to return two <div> elements.

Don't forget that the render() function is exactly that, a function. Functions always take in a number of parameters and always return exactly one value (unless void).

It's easy to forget, but you're writing JSX and not HTML. JSX is just a syntactic sugar for javascript. So one element would be translated as:

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

This gives a React element, which you can return from your render() function, but you cannot return two individually. Instead you wrap them in another element which have these divs as children.

From the official docs:

Caveat:

Components must return a single root element. This is why we added a <div> to contain all the <Welcome /> elements.

Try wrapping these components in another component so that you only return one:

 //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'));

相关文章