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

我试图从另一个组件调用一个组件来显示一些html,如果我单独调用该组件它可以工作,但如果我在同一个返回函数中添加更多标记,它会抛出以下错误：

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(作品)

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

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

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

module.exports = ProductSlider;

ProductSlider.jsx(不起作用)

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;

有人知道这段代码有什么问题吗？

解决方法:

您必须将渲染的组件包装在顶级组件中,这是您的问题.如果你这样做了

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

它会工作.

标签：javascript,reactjs,react-dom
来源： https://codeday.me/bug/20190608/1200169.html