Почему мне нужно написать cloneElement, тогда дочерний компонент будет перерисован
если я пишу только {this.props.children}, третья строка не может меняться каждую секунду. Мне нужно написать {React.cloneElement (this.props.children)}, почему?
Это родительский 下午 1:50:27. Это ребенок 下午 1:50:27. Это ребенок 下午 1:28:30.
https://codepen.io/yemos/pen/jQveVx/?editors=0011
class A extends React.Component {
constructor(props) {
super(props);
this.state = { date: new Date() };
}
componentDidMount() {
this.timerID = setInterval(() => this.setState({date: new Date()}), 1000);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
render() {
return (
<div>
<h5>It is parent{this.state.date.toLocaleTimeString()}.</h5>
{React.cloneElement(this.props.children)}
{this.props.children}
</div>
);
}
}
class B extends React.Component {
componentWillMount(){
console.info('componentWillMount');
}
render() {
console.info('render');
return <h5>It is child{new Date().toLocaleTimeString()}.</h5>;
}
}
ReactDOM.render(<A><B/></A>, document.getElementById("root"));<div id = "root">
<!-- This element's contents will be replaced with your component. -->
</div>)
Потому что React будет отображать только обновленную DOM. Вы создаете интервал для обновления состояния A и передаете B в качестве реквизита в A, поэтому каждую секунду A имеет новое состояние, тогда метод рендеринга будет отображать только обновленную DOM. `B`, поскольку опора не меняется, вы передаете ее как статический объект, он не меняется с течением времени, поэтому 'A' не получает никаких изменений. Но когда вы клонируете дочерний элемент, вы делаете его новую копию, поэтому каждую секунду рендерится его новая копия, потому что в любое время, когда изменяется состояние `A`, React запускает метод рендеринга.
Ответы 2
cloneElement клонировать и возвращать новый элемент React.
Но реагировать элементы неизменны. Создав элемент, вы не можете изменять его дочерние элементы или атрибуты.
Поскольку вы просто возвращаете новую дату в компоненте B, она не будет обновлена. Вам нужно будет использовать дату состояния и сделать то же, что и в компоненте A.
Хотя клонирование работает, это просто потому, что оно возвращает новый элемент реакции. Но props.children вернет тот же элемент и обновит только тогда, когда это потребуется.
{new Date().toLocaleTimeString()} просто возвращает статическую дату.
напишите <B /> direct, это также тот же элемент, и его свойства или состояние не изменятся, но он будет повторно отображен. это меня смутило, потому что я думаю, что у них нет различий. <div> <h5>It is parent{this.state.date.toLocaleTimeString()}.</h5> {this.props.children} <B/> </div>
ах, я думаю, ты не понял моего ответа. использование даты состояния будет нормально, но использование новой даты не сработает из-за неизменности. Таким образом, я предлагаю вам перечитать мой ответ.
Поскольку B визуализируется как дочерний для A, повторный рендеринг компонента A не будет запускать метод render для component B, и, следовательно, никакие новые обновления не будут сброшены в component B, которым в вашем случае является Date data. Использование React.cloneElement гарантирует, что для дочерних элементов будет создан новый элемент и, следовательно, обновленное значение будет повторно оценено.
спасибо, так как я могу принудительно повторно отрисовать компонент B без использования метода клонирования. Я хочу принудительно обновить его, но B имеет только одну сложную структуру данных в качестве опоры, например <B peer = {complexobject}>, без состояния, B отображает себя сложным объектом.
Вы можете запустить рендеринг B без cloneelement, имея оболочку, которая отображает <A><B/></A> и имеет логику setInterval в своем методе componentDidMount, однако делать это излишне, и лучше использовать cloneElement для вашего случая