Question

我试图从另一个组件调用一个组件来显示一些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（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（没有工作）

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中渲染彼此相邻的两个组件

2 个答案: