Я создал демо.
URL демо: https://4ikgc.csb.app/
Почему внешний HTML всегда будет <h1>abc</h1>
Кстати, почему консоль, кажется, записывает все дважды.
Теперь содержимое console.log таково:
render h1: {current: null} undefined
render h1: {current: null} undefined
second abc <h1>abc</h1>
forth abc <h1>abc</h1>
first abc <h1>abc</h1>
first abc <h1>abc</h1>
third hello1 <h1>abc</h1>
third hello1 <h1>abc</h1>
fifth hello2 <h1>abc</h1>
fifth hello2 <h1>abc</h1>
render h1: <h1>hello3</h1> <h1>abc</h1>
render h1: <h1>hello3</h1> <h1>abc</h1>
Но я подумал, что правильное содержимое:
render h1: {current: null} undefined
second abc <h1>abc</h1>
forth abc <h1>abc</h1>
first abc <h1>abc</h1>
third hello1 <h1>abc</h1>
fifth hello2 <h1>abc</h1>
render h1: <h1>hello3</h1> <h1>hello3</h1>
Надеюсь, кто-нибудь может мне помочь! Большое спасибо!
import React from "react";
class Hello extends React.Component {
constructor(props) {
super(props);
this.h1 = React.createRef();
this.state = {
name: "abc"
};
}
componentDidMount() {
this.setState((state, props) => {
console.log("first", state.name, this.h1.outerHTML);
return {
name: "hello1"
};
});
console.log("second", this.state.name, this.h1.outerHTML);
this.setState((state, props) => {
console.log("third", state.name, this.h1.outerHTML);
return {
name: "hello2"
};
});
console.log("forth", this.state.name, this.h1.outerHTML);
this.setState((state, props) => {
console.log("fifth", state.name, this.h1.outerHTML);
return {
name: "hello3"
};
});
}
render() {
console.log("render h1:", this.h1, this.h1.outerHTML);
return <h1 ref={ref => (this.h1 = ref)}>{this.state.name}</h1>;
}
}
export default Hello;