All geek questions in one place

Error: Related JSX elements must be wrapped in a tag

I try to print the details of the reacting component, but I get an error message. Please, help:

Fragment:

<!-- 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 expect "Hello dear!" and then the next line is blue. But instead, I get this error.

Error:

enter image description here

+6
source share
8 answers

Responsive v16 and later

As with React v16, React components can return an array. This was not possible until v16.

To do this is simple:

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

, . , , . ,, .

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'));
+12

, html render, :

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

v16 +:

React 16 React.Fragment, , dom node . :

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>
]);

v < 16:

div-, :

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

. React , JSX . node, divs , div, span .

, 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>
Hide result
+3

React 16 render ( div).

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

DOM html.

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

, return -. , , ;)

+1

Render ,

//

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

, , ,

, ,

but with reactive fiber you can do what you do to fix your problem there are two solutions:

Or use a wrapper for both of your elements

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

The second solution is to return an array with both of your elements

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'));
+1
source

Close everything you use in the return statement inside another div tag.

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

Source: https://habr.com/ru/post/1016309/

More articles:


All Articles