Enclosing tag ReactJS

У меня есть неприятная проблема. Я начал с ReactJS сегодня, и я пытаюсь кое-чему научиться на практике. Тем не менее, она возвращается сообщение об ошибке:Enclosing tag ReactJS

Adjacent JSX elements must be wrapped in an enclosing tag (47:14)

А вот код:

var Row = React.createClass({ 
 
    displayName: "Row", 
 
    render: function() { 
 
    return <div className="row">{this.props.content}</div> 
 
    } 
 
}); 
 

 
var Title = React.createClass({ 
 
    displayName: "Title", 
 
    getDefaultProps: function() { 
 
    return { 
 
     className: "" 
 
    } 
 
    }, 
 
    render: function() { 
 
    <h1 className={this.props.className}>{this.state.content}</h1> 
 
    } 
 
}); 
 

 
var Paragraph = React.createClass({ 
 
    displayName: "Paragraph", 
 
    getDefaultProps: function() { 
 
    return { 
 
     className: "" 
 
    } 
 
    }, 
 
    render: function() { 
 
    <p className={this.props.className}>{this.state.content}</p> 
 
    } 
 
}); 
 

 
var Jumbotron = React.createClass({ 
 
    displayName: "Jumbotron", 
 
    render: function() { 
 
    return <div className={this.props.className}> 
 
      {this.props.content} 
 
      </div> 
 
    } 
 
}); 
 

 
var Header = React.createClass({ 
 
    displayName: "Header", 
 
    render: function() { 
 
    return <Row content= 
 
      <Jumbotron className="jumbotron col-md-12" content= 
 
       <Title content="Conhecimento Livre" /> 
 
       <Paragraph content="Quem busca o conhecimento e o acha, obterá dois prêmios: um por procurá-lo, e outro por achá-lo. Se não o encontrar, ainda restará o primeiro prêmio." /> 
 
      /> 
 
      /> 
 
    } 
 
}); 
 

 
ReactDOM.render(<Header />, document.getElementById('main'));

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Conhecimento Livre</title> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
 
    <script src="build/react.js"></script> 
 
    <script src="build/react-dom.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
 
    <script type="text/babel" src="src/app.js"></script> 
 
    </head> 
 
    <body> 
 
    <div id="main"> 
 
     <div class="row"> 
 
     <div class="jumbotron col-md-12"> 
 
      <h1>Conhecimento Livre</h1> 
 
      <p>Quem busca o conhecimento e o acha, obterá dois prêmios: um por procurá-lo, e outro por achá-lo. Se não o encontrar, ainda restará o primeiro prêmio.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

Воспользовавшись бы попросить вас мнение, как получает код. Вспоминая, что я начинаю.

источник

2016-03-23 Daniel Bastos

JSX не может быть фрагментом AFAIR, так что вы должны иметь что-то вроде ''

component

–

@zb 'Я положил

, и ошибка продолжалась. –

-1

Вы можете попробовать это:

var Row = React.createClass({ 
displayName: "Row", 
render: function() { 
    return <div className="row">{this.props.children}</div> 
    } 
}); 
var Title = React.createClass({ 
displayName: "Title", 
getDefaultProps: function() { 
return { 
    className: "" 
} 
}, 
render: function() { 
<h1 className={this.props.className}>{this.state.content}</h1> 
} 
}); 

var Paragraph = React.createClass({ 
    displayName: "Paragraph", 
    getDefaultProps: function() { 
    return { 
    className: "" 
    } 
}, 
render: function() { 
    <p className={this.props.className}>{this.props.children}</p> 
} 
}); 
var Jumbotron = React.createClass({ 
    displayName: "Jumbotron", 
    render: function() { 
    return <div className={this.props.className}> 
     {this.props.children} 
     </div> 
} 
}); 
var Header = React.createClass({ 
    displayName: "Header", 
    render: function() { 
    return <Row> 
     <Jumbotron className="jumbotron col-md-12"> 
      <Title content="Conhecimento Livre" /> 
      <Paragraph>Quem busca o conhecimento e o acha, obterá dois prêmios: um por procurá-lo, e outro por achá-lo. Se não o encontrar, ainda restará o primeiro prêmio.</Paragraph> 
     </Jumbotron> 
     </Row> 
} 
});

источник

2016-03-23 03:52:09

Смежные элементы JSX должны быть обернуты в прилагаемый тег (44:10):/ –

вместо размещения всей разметки jsx в атрибуте контента, поместите ее как внутренние дочерние элементы. в родительском объекте можно получить доступ с помощью this.props.children. –

Я внесла некоторые изменения, основанные на вашем коде и вашем ответе. Спасибо, я отвечу. –

придется изменить свой код здесь, чтобы сделать его работу:

var Row = React.createClass({ 
    displayName: "Row", 
    render: function() { 
    return <div className="row"><Jumbotron/></div> 
    } 
}); 

var Title = React.createClass({ 
    displayName: "Title", 
    getDefaultProps: function() { 
    return { 
     className: "" 
    } 
    }, 
    render: function() { 
    return <h1 className={this.props.className}>{this.props.content}</h1> 
    } 
}); 

var Paragraph = React.createClass({ 
    displayName: "Paragraph", 
    getDefaultProps: function() { 
    return { 
     className: "" 
    } 
    }, 
    render: function() { 
    return <p className={this.props.className}>{this.props.content}</p> 
    } 
}); 

var Jumbotron = React.createClass({ 
    displayName: "Jumbotron", 
    render: function() { 
    return <div className={this.props.className}> 
      <Title content="Conhecimento Livre" /> 
      <Paragraph content="Quem busca o conhecimento e o acha, obterá dois prêmios: um por procurá-lo, e outro por achá-lo. Se não o encontrar, ainda restará o primeiro prêmio." /> 
      /> 
      </div> 
    } 
}); 

var Header = React.createClass({ 
    displayName: "Header", 
    render: function() { 
    return <Row/> 
    } 
}); 

ReactDOM.render(<Header />, document.getElementById('main'));

источник

2016-03-23 03:20:19

Он работает. Но моя идея состоит в том, чтобы повторно использовать строку, jumb ... и т. Д. И в другом месте. И это мешает. –

Если бы я был вами, я бы создал с реквизитами Title и Paragraph, поэтому я мог бы повторно использовать элемент Row. –

Но строка более общая, чем эта. У него не всегда есть титул. –

Enclosing tag ReactJS

ответ

Смежные вопросы