javascript - 在 React 中渲染两个相邻的组件

Question

我正在尝试从另一个组件调用一个组件以显示一些 html，如果我单独调用该组件，它可以工作，但是如果我在同一个返回函数中添加更多标记，则会引发以下错误：

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

产品.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;

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

Answer 1

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

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

它会起作用的。

Answer 2

您不需要顶级<div>包装器

如果您使用的是反应 16.2+。只需使用Fragments：

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

你也可以这样尝试：

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

注意：key应该是唯一的。