2017-03-03 31 views
1

Reactコンポーネントを2回再利用することは可能ですか?React:コンポーネントを一度インスタンス化して複数回使用する

私はComponentDidMountでタイムアウトをトリガする必要がありますが、同じページに複数のコンポーネントを1回だけ作成する必要があります。だから、コンポーネントをインスタンス化して引数として渡すことは可能でしょうか?

は例えば、完全なレンダリングタイムアウト走るコンポーネントがあります:

export default ComponentOne extends React.Component { 
    componentDidMount =() => { 
     setTimeout(() => (this.doSomeStuff()), 10 * 1000); 
    } 

    doSomeStuff =() => { 
     // Do something, that can be done only once 
    } 
} 

ように、コンポーネントを一度だけ行うことができますいくつかのものを行います。しかし、ページ上のようなさまざまな場所での画面解像度(CSSメディアクエリ)に応じて、表示される2つの要素がある:

<div class="page-start block-that-appears-for-desktop"> 
    <ComponentOne /> 
</div> 
<!-- ... --> 
<div class="page-end block-that-appears-for-mobile"> 
    <ComponentOne /> 
</div> 

は、だから今、私はcomponentDidMount()が一つでもあれば、二回と2つのタイムアウトと呼ばれていますのブロックが隠されています。

+0

コードを共有できますか?私はあなたが何をしようとしているのか少し分かりません。 –

+0

おそらくコンポーネントの外にタイムアウトを移動する必要があります。 – paqash

+0

htmlコードを管理している場合、タイムアウトのあるタスクを実行する必要があるかどうかを知るために小道具を使用してみませんか? ''のようなものを 'componentDidMount'で' this.props.doTask'をテストできます。 – mguijarr

答えて

0

doSomeStuff()を1回だけ使用したいので、上位のコンポーネントにその関数を抽出して、追加のプロパティなしで1回だけ実行するようにしてください。

反応状態を持ち上げる方法の詳細については、https://facebook.github.io/react/docs/lifting-state-up.htmlを参照してください。

関連する問題