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
  • спасибо, а почему картинка не показывается? 15 мар 2016 в 19:18
  • атрибут src а не scr 15 мар 2016 в 19:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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