var React=require('react');
var ReactDOM=require('react-dom');
var data={
name:"Yaroslav",
photo:"http://www.animated-gifs.eu/category_nature/space-earth/0003.gif",
about:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut laboe dolor in rep"
}
var profileName=React.createClass({
render: function (){
return (
<div>
{this.props.username}
</div>
)
}
});
var profileImage=React.createClass({
render: function (){
return(<img scr={this.props.userimage}/>)
}
});
var profileAbout=React.createClass({
render: function (){
return (
<div>
{this.props.userabout}
</div>
)
}
});
var Container=React.createClass({
render: function (){
return (
<div>
<profileName username={this.props.user.name} />
<profileImage userimage={this.props.user.photo} />
<profileAbout userabout={this.props.user.about} />
</div>
)
}
});
ReactDOM.render(
<Container user={data} />,
document.getElementById('app')
);
Добавить комментарий
|
1 ответ
React может либо рендерить теги из строки в HTML, либо компоненты React (classes).
Чтобы отрендерить тег HTML, используйте название имени тега в нижнем регистре JSX (var myDivElement,
var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);
Чтобы отрендерить компонент React (Component) в локальную переменную используйте верблюжью нотацию с заглавной буквы (var MyComponent,
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);
Ваш пример https://jsfiddle.net/x42z9p83/