Это родительский компонент:
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
news: ""
}
}
componentDidMount() {
this.updateNews();
}
updateNews = () => {
...
}
render() {
<CustomButton type = "primary" />
}
Это CustomButton
:
const CustomButton = (props) => {
const {
type
} = props;
const updateItem = () => {
... // The firing of the setState should be here
}
return (
<Button
type = {type}
onClick = {() => {
updateItem();
}}
>{value}
</Button>
);
Как я могу запустить изнутри const updateItem = () => {
в CustomButton
, чтобы Parent
запускал updateNews
или componentDidMount
?
Вы должны передать функцию обратного вызова CustomButton, что-то вроде этого:
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
news: ""
}
}
componentDidMount() {
this.updateNews();
}
updateNews = () => {
...
}
render() {
<CustomButton type = "primary" stateUpdatingCallback = {(val) => {this.setState({myVal: val})}}/>
}
const CustomButton = (props) => {
const {
type
} = props;
const updateItem = () => {
... // The firing of the setState should be here
}
return (
<Button
type = {type}
onClick = {() => {
this.props.stateUpdatingCallback("somevalue")
}}
>{value}
</Button>
);
Используйте componentDidUpdate в родительском компоненте следующим образом.
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
news: "",
fetchToggle:true
}
}
componentDidMount() {
this.updateNews();
}
componentDidUpdate(prevprops,prevstate){
if (prevstate.fetchToggle!==this.state.fetchToggle){
this.updateNews();
}
}
updateNews = () => {
...
}
fetchToggle=()=>{
this.setState({
fetchToggle:!this.state.fetchToggle;
})
}
render() {
<CustomButton type = "primary" fetchToggle = {this.fetchToggle} />
}
В дочернем компоненте нажатие кнопки вызывает эту функцию переключения.
const CustomButton = (props) => {
const {
type
} = props;
const updateItem = () => {
... // The firing of the setState should be here
}
return (
<Button
type = {type}
onClick = {() => {
props.fetchToggle()
}}
>{value}
</Button>
);
Помните, что значение переключения в состоянии - это более чистый и элегантный способ обновления или получения последних данных при каждом щелчке мышью.
Мы передаем функцию как обратный вызов ее дочерним элементам в общей практике. Использование componentDidUpdate заключается в том, что всякий раз, когда состояние обновляется, эта функция запускается. Чтобы вызвать эту функцию, мы должны обновить некоторое значение состояния, поэтому лучше всего просто использовать какое-то значение который имеет всего два значения, например bool. когда вы нажимаете кнопку в custombutton, эта функция запускается и состояние обновляется. Это повторно отображает страницу. Если вы не используете componentDidUpdate, это невозможно, поскольку componentdidmount запускается только один раз.
Как он узнает из
CustomButton
, чтоprops.fetchToggle()
вызывает функцию другого компонента?