在React中渲染彼此相邻的两个组件

Question

I am trying to call a component from another component to display some html and it works if I call the component alone, but if I add more markup inside the same return function, it throws the following error:

Adjacent JSX elements must be wrapped in an enclosing tag (9:12) while parsing file

Product.jsx

var React = require('react');

var Product = React.createClass({
    render: function() {
        return (<p>Product</p>);
    }
});

module.exports = Product;

ProductSlider.jsx (Works)

var React = require('react');
var Product = require('./Product.jsx');

var ProductSlider = React.createClass({
    render: function() {

        return (
            <div><Product /></div>
        );
    }
});

module.exports = ProductSlider;

ProductSlider.jsx (Doesn't Work)

var React = require('react');
var Product = require('./Product.jsx');

var ProductSlider = React.createClass({
    render: function() {

        return (
            <div><Product /></div>
            <div><p>Something else</p></div>
        );
    }
});

module.exports = ProductSlider;

Does anybody knows what is wrong with this code?

Answer 1

You have to wrap a rendered component in a top level component, that's your problem. If you did

return (
      <div>
        <div><Product /></div>
        <div><p>Something else</p></div>
      </div>
    );

It would work.

Answer 2

You don't need a top level <div> wrapper

If you are using react 16.2+. Simply use Fragments :

return(
  <Fragment> 
      <div><Product /></div>
      <div><p>Something else</p></div>
  </Fragment>
)

You can also try this way:

return(
  [
      <div key="unique1"><Product /></div>
      <div key="unique2"><p>Something else</p></div>
  ]
)

Note: key should be unique.