web-dev-qa-db-ja.com

React、未終了のJSXコンテンツ

Jspm/systemjsとbabelを使用して、基本的な反応の例をセットアップしようとしています。私はここに簡単なページを表示するためにこのコードを持っていますが、エラーが発生しています

import React from 'react';

export default React.createClass({
displayName: 'MainComponent',
propTypes: {
    item: React.PropTypes.object
},
render: function render() {
    return (
        <div class="builder-conteiner">

        <div>;
    );
}
});

React.render(<MainComponent />, document.getElementById('app'))

何も表示されず、コンソールに「Unterminated JSX contents」というエラーが表示され、babelは次のようにreact.render行を指しています。

 17 | React.render(<MainComponent />, document.getElementById('app'))
    |                               ^

これはまだ新しいので、ここで何が間違っているのかわかりませんが、助けていただければ幸いです。ありがとう！

javascriptreactjsbabeljsreact-jsx
30
ajmajmajma

render()に2つの閉じられていない<div>タグと、おそらく属していないセミコロンがあります。私はそれらを取り除き（例えば、それらを閉じて、<div>;のセミコロンが属していない場合は削除します）、もう一度やり直します。

39
JMM

Div要素を閉じる際に/を指定し、div要素の後にセミコロン（;）を削除します。

import React from 'react';

export default React.createClass({
displayName: 'MainComponent',
propTypes: {
    item: React.PropTypes.object
},
render: function render() {
    return (
        <div class="builder-conteiner">

        <div/>
    );
}
});

React.render(<MainComponent />, document.getElementById('app'))
0
KARTHIKEYAN.A