Reactコンポーネントが表示されているかどうかを調べる

Question

アクションをストアにディスパッチする前に、プロミスベースの関数を呼び出すとします。 問題は、コンポーネントを表示するときにのみ関数を呼び出すことです。私は、コンポーネントのオンとオフを切り替えるトグルアクションを使用します。ここで

は、私のコードのサンプルです：

if (/*component is going to be displayed*/) { 
    init().then(function() { 
    store.dispatch(toggleSomething()); 
    }); 
} 
else { 
    store.dispatch(toggleSomething()); 
} 

処置：

export const SomethingActions = { 
    TOGGLE_SOMETHING: 'TOGGLE_SOMETHING' 
}; 

export function toggleSomething() { 
    return { 
    type: SomethingActions.TOGGLE_SOMETHING 
    }; 
} 

リデューサー：リアクトコンポーネントの

export default function somethingState(state = defaultState, action) { 
    switch (action.type) { 
    case somethingActions.TOGGLE_SOMETHING 
    return Object.assign({}, state, { open: !state.open}); 

    default: 
    return state; 
    } 
} 

一部：

Something.propTypes = { 
    display: React.PropTypes.bool.isRequired 
}; 

function mapStateToProps(state, ownProps) { 
    return { 
    display: state.something.open 
    }; 
} 

私は基本的に上記のコンポーネントのオープン/表示の値、またはコンポーネントが表示されているかどうかを知る別の方法を知りたいと思っています。 レンダリング機能を汚染したり、ディスパッチを呼び出すたびに変化するブールを保存したりしたくありません。 これを行う方法はありますか？

Answer 1

その音で、Reactのライフサイクルメソッドを利用したいと思うでしょう。特に、componentWillMountおよびcomponentWillReceiveProps。初期は、レンダリングのためにあなたはそれが両方のフックのために再利用できるように、別の関数にロジックを抽出することもできますので、

componentWillReceivePropsは、トリガーされません。

function trigger(isDisplayed) { 
    if (isDisplayed) { 
    init().then(function() { 
     store.dispatch(toggleSomething()); 
    }); 
    } 
    else { 
    store.dispatch(toggleSomething()); 
    } 
} 

componentWillMount() { 
    trigger(this.props.display); 
} 

componentWillReceiveProps(nextProps) { 
    trigger(nextProps.display); 
} 

Answer 2

Q1：「問題がありますこれは、特に、間違いなく（）

componentDidMount componentWillMount（）&のライフサイクルメソッドを反応させるための問題です ：私は唯一の構成要素が

A1「が表示されようとしている関数を呼び出したいこと

Q2：「基本的には、上記のコンポーネントのオープン/表示の価値、またはコンポーネントが表示されているかどうかを知る別の方法を知りたい」

A2：コンポーネントがレンダリングされるときにcomponentDidMount（）メソッドが呼び出されます。状態が変化したときにプロビジョニングを呼び出すために、コンポーネントがレンダリング時に約束を呼び出す無限ループを防ぐために、コンポーネントにトグル状態を含めるのは避けてください。ストア内の状態を切り替えますが、このコンポーネントではこの状態を使用しないコンポーネントマウント時のアクションをディスパッチします。このようにして、コンポーネントをUIの更新なしでレンダリングするかどうかを知ることができます。私はそれが助けて欲しい！

import React from 'react'; 


class StackOverFlow extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    componentDidMount() { 
    toggleSomethingOn(); 
    } 

    componentWillUnmount() { 
    toggleSomethingOff(); 
    } 

    render() { 
    return (
     <div> 
     The component has been rendered! 
     <br /> 
     </div> 
    ); 
    } 
} 

function toggleSomethingOn() { 
    //dispatches action to toggle state "open" 
} 

function toggleSomethingOff() { 
    //dispatches action to toggle state "closed" 
} 

export default StackOverFlow; 

A2：あなただけのコンポーネントは、あなたのブラウザの開発ツールに移動し、コンポーネントのhtmlのための要素/ DOMを検索することができます（あなたのコードの外で）レンダリングされているかどうかを調べるために探している場合。