Переменные

Переменные создаются в методе constructor().

class Items extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: "React"};
    }
    
    render() {
        return (
            <p>Приложение: {this.state.name}</p>
        );
    }
}

// Вывод данных в элементе "#app"
ReactDOM.render(<Items />, document.getElementById("app"));

Пример кода на JSFiddle

Переменные надо создавать внутри объекта this.state, т.е. просто задать this.name будет неправильно, т.к. переменная не будет обновляться в приложении.

В результате будет сгенерирован HTML:

<p>Приложение: React</p>

Когда переменная this.state изменяется, то React снова вызывает render() и генерирует приложение с новыми данными.

React экранирует переменные (например, <h1> преобразуется в &lt;h1&gt;). Это сделано для предотвращения атак XSS.

Параметры

При создании React-приложения можно передавать параметры, которые будут доступны через объект props.

class Item extends React.Component {    
    render() {
        return (
            <p>Приложение: {this.props.title}</p>
        );
    }
}

ReactDOM.render(<Item title="React" />, document.getElementById("app"));

// Приложение: React

Пример кода на JSFiddle

Для каждого объекта можно передавать свой параметр:

ReactDOM.render(<div>
    <Item title="React" />
    <Item title="JavaScript" />
    <Item title="jQuery" />
</div>, document.getElementById("app"));

// Приложение: React
// Приложение: JavaScript
// Приложение: jQuery

Пример кода на JSFiddle

Параметры можно также получить в конструкторе.

class Items extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: props.title};
    }
    
    render() {
        return (
            <p>Приложение: {this.state.name}</p>
        );
    }
}

// Вывод данных в элементе "#app"
ReactDOM.render(<Items title="React" />, document.getElementById("app"));

Пример кода на JSFiddle

Комментарии

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