0
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 ответ 1

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/

2
  • спасибо, а почему картинка не показывается? Commented 15 мар. 2016 в 19:18
  • атрибут src а не scr Commented 15 мар. 2016 в 19:31

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.