Если вы создали в React элемент Twitter как в примере ниже, то как бы он выглядел?
<Twitter username="tylermcginnis33">
{(user) =>
user === null ? <Loading /> : <Badge info={user} />
}
</Twitter>;
import React, { Component, PropTypes } from 'react';
import fetchUser from 'twitter';
// fetchUser принимает имя пользователя и возвращает promise
// который резолвится с данными пользователя
class Twitter extends Component {
// закончите код здесь
}Если вы не очень хорошо знакомы с шаблоном render callback, это может показаться немного странным. В этом шаблоне компонент получает функцию в качестве своего потомка. Обратите внимание, что находится внутри тега <Twitter> выше. Вместо другого компонента, как вы возможно видели до этого, потомок компонента Twitter является функцией. Это означает то, что в данной реализации компонента Twitter нам необходимо обратиться к props.children как к функции.
Вот как я вижу это решение:
import React, { Component, PropTypes } from 'react';
import fetchUser from 'twitter';
class Twitter extends Component {
state = {
user: null,
};
static propTypes = {
username: PropTypes.string.isRequired,
};
componentDidMount() {
fetchUser(this.props.username).then((user) =>
this.setState({ user })
);
}
render() {
return this.props.children(this.state.user);
}
}Обратите внимание, что, как упоминал выше, я обращаюсь к props.children как к функции, вызывая ее и передавая пользователя.
Что хорошего в этом шаблоне, это то, что мы выделили наш родительский компонент из нашего дочернего компонента. Родительский компонент управляет состоянием и потребитель родительского компонента может решить каким образом они хотели бы использовать переданные аргументы в их интерфейсе, полученные из родительского.
Чтобы продемонстрировать это, давайте примем, что в другом файле мы хотим отрисовать Profile вместо Badge, и так как мы используем шаблон render callback, мы можем менять окружение интерфейса без изменения нашей реализации родительского компонента Twitter.
<Twitter username="tylermcginnis33">
{(user) =>
user === null ? <Loading /> : <Profile info={user} />
}
</Twitter>@react_tg