機能内のReactJSライフサイクルメソッド

Question

クラス内にコンポーネントを書き込むのではなく、それらがダムであるためです。私は主にこれらを関数の中に記述します。しかし、componentDidMount、componentWillMount機能コンポーネントをどのように上書きするのですか？それも可能ですか？

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> 
    ) 
} 

Answer 1

機能コンポーネントのプロパティは、彼らが反応するライフサイクル機能へのアクセスやthisキーワードを持っていないということです。ライフサイクル機能を使用する場合は、React.Componentクラスを拡張する必要があります。あなただけの余分なロジックを必要とせずに、あなたのコンポーネントをレンダリングしたい場合

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> 
    ) 
    } 
} 

機能コンポーネントが便利です。

Answer 2

React LifeCycleを使用する必要がある場合は、Classを使用する必要があります。

サンプル：

import React, { Component } from 'react'; 

class Grid extends Component { 

constructor(props){ 
    super(props) 
} 

componentDidMount() { /* do something */ } 

render() { 
    return <h1>Hello</h1> 
} 

} 

Answer 3

あなたは、機能コンポーネントにライフサイクル機能を追加するためにreact-pure-lifecycleを使用することができます。

例：

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)(Grid);