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

Question

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

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;

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

Answer 1

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

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

它会起作用。

Answer 2

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

如果您使用的是 React 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 应该是唯一的。

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

Render two components adjacent to each other in React

javascript

reactjs

react-dom