堆棧內存溢出
  簡體   English   中英

錯誤：相鄰的JSX元素必須包裝在封閉標記中

[英]Error: Adjacent JSX elements must be wrapped in an enclosing tag

 原文  2017-04-05 07:59:01  3   8    javascript/ reactjs/ components

問題描述

我試圖打印反應組件的道具，但收到錯誤。 請幫忙：

片段： 

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

我期待“親愛的你好！” 然后下一行“藍色”。 但是，我收到了這個錯誤。

錯誤：

在此輸入圖像描述

8 個解決方案

解決方案1
 12 已采納  2017-04-05 08:03:52

反應v16及更高版本

從React v16開始，React組件可以返回一個數組。 這在v16之前是不可能的。

這樣做很簡單： 

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

請注意，您需要為數組的每個元素聲明一個鍵。 根據官方消息來源，在React的未來版本中可能不需要這樣做，但現在還沒有。 另外，不要忘記將數組中的每個元素分開,就像通常使用數組一樣。

反應v15.6及更早版本

React Components只能返回一個表達式，但是您嘗試返回兩個<div>元素。

不要忘記render()函數就是一個函數。 函數總是包含許多參數，並且始終只返回一個值（除非無效）。

這很容易忘記，但你在編寫JSX而不是HTML。 JSX只是javascript的語法糖。 因此，一個元素將被翻譯為： 

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

這給出了一個React元素，您可以從render()函數返回，但不能單獨返回兩個元素。 而是將它們包裝在另一個具有這些div作為子元素的元素中。

來自官方文檔 ：

警告：

組件必須返回單個根元素。 這就是我們添加<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'));

解決方案2
 3  2017-04-05 08:05:07

問題是你從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 <16：

將所有元素包裝在包裝器div中，如下所示： 

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

原因 ：一個React組件不能返回多個元素，但是一個JSX表達式可以有多個子節點，你只能返回一個節點，所以如果你有一個要返回的divs列表，你必須將你的組件包裝在一個div中，跨度或任何其他組件。

還有一件事，你需要包括babel的引用，在頭文件中使用這個引用： 

<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> <!-- gap above is intended as else stackOverflow not allowing to post --> </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>

解決方案3
 3  2017-09-20 15:52:51

使用React 16，我們可以將render中的多個組件作為數組返回（沒有父div）。 

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

解決方案4
 1  2017-04-05 08:04:50

將返回的DOM包裝在一個html元素中。

嘗試這個 

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

解決方案5
 1  2017-04-05 08:05:18

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

嗨，返回的元素應該被東西包裹。 只需添加如上所示，應該工作;）

解決方案6
 1  2017-04-05 08:05:43

Render函數應該只返回一個根元素試試這個

//一個組件 

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

解決方案7
 1  2017-04-05 08:21:15

實際上你的問題是你試圖同時渲染幾個元素，這個版本的反應是不可能的，

原因渲染它是一個函數，並且函數本質上只返回一個值

但是使用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'));

解決方案8
 1  2017-04-05 09:00:05

將您在return語句中使用的所有內容包含在另一個div標記內。 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 解析錯誤：必須將相鄰的 JSX 元素包裝在封閉標記中 解析錯誤：相鄰的 JSX 元素必須包含在封閉標記中 相鄰的 JSX 元素必須被包裹在一個封閉標記中，當它被包裹在一個結束標記中 必須將相鄰的JSX元素包裝在帶有換行符標記的封閉標記中 相鄰的 JSX 元素必須包含在圖像的封閉標簽中嗎？ 相鄰的JSX元素必須包裝在一個封閉標簽中-gatsby.js 預期的“}”或相鄰的 JSX 元素必須包含在封閉標記中 SyntaxError：相鄰的 JSX 元素必須包含在封閉標記中 相鄰的JSX元素必須包裝在一個封閉的標記React Native中 相鄰的 JSX 元素必須包含在封閉標記中 (34:0)
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM