4

別のコンポーネントからコンポーネントを呼び出して html を表示しようとしていますが、コンポーネントを単独で呼び出すと機能しますが、同じ return 関数内にさらにマークアップを追加すると、次のエラーがスローされます。

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;

このコードの何が問題なのか誰か知っていますか?

4

2 に答える 2

4

レンダリングされたコンポーネントをトップレベルのコンポーネントにラップする必要があります。それが問題です。あなたがした場合

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

それはうまくいくでしょう。

于 2016-06-01T02:56:37.930 に答える