La méthode ReactJS lifecycle à l'intérieur d'un composant fonctionnel
au lieu d'écrire mes composants dans une classe, puisqu'ils sont muets. Je les écris surtout dans une fonction. Mais comment outrepasser componentDidMount, componentWillMount à l'intérieur des composants fonctionnels? Est-il même possible?
const grid = (props) => {
console.log(props);
let {skuRules} = props;
const componentDidMount = () => {
if(!props.fetched) {
props.fetchRules();
}
console.log('mount it!');
};
return(
<Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}>
<Box title="Sku Promotion">
<ActionButtons buttons={actionButtons} />
<SkuRuleGrid
data={skuRules.payload}
fetch={props.fetchSkuRules}
/>
</Box>
</Content>
)
}
3 réponses
Vous pouvez utiliser réagissent-pure-cycle de vie ajouter des fonctions de cycle de vie aux composants fonctionnels.
Exemple:
import React, { Component } from 'react';
import lifecycle from 'react-pure-lifecycle';
const methods = {
componentDidMount(props) {
console.log('I mounted! Here are my props: ', props);
}
};
const Channels = props => (
<h1>Hello</h1>
)
export default lifecycle(methods)(Channels);
la propriété des composants fonctionnels est qu'ils n'ont pas accès aux fonctions de réaction du cycle de vie ou aux this mot clé. Vous avez besoin d'étendre l' React.Component class si vous voulez utiliser la fonction lifecycle.
class Grid extends React.Component {
constructor(props) {
super(props)
}
componentDidMount () {
if(!this.props.fetched) {
this.props.fetchRules();
}
console.log('mount it!');
}
render() {
return(
<Content title="Promotions" breadcrumbs={breadcrumbs} fetched={skuRules.fetched}>
<Box title="Sku Promotion">
<ActionButtons buttons={actionButtons} />
<SkuRuleGrid
data={skuRules.payload}
fetch={props.fetchSkuRules}
/>
</Box>
</Content>
)
}
}
les composants fonctionnels sont utiles quand vous voulez seulement rendre votre composant sans avoir besoin de plus de logique.
si vous avez besoin D'utiliser React LifeCycle, vous avez besoin de use Class.
Exemple:
import React, { Component } from 'react';
class Grid extends Component {
constructor(props){
super(props)
}
componentDidMount () { /* do something */ }
render () {
return <h1>Hello</h1>
}
}