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つのタイムアウトと呼ばれていますのブロックが隠されています。
コードを共有できますか?私はあなたが何をしようとしているのか少し分かりません。 –
おそらくコンポーネントの外にタイムアウトを移動する必要があります。 – paqash
htmlコードを管理している場合、タイムアウトのあるタスクを実行する必要があるかどうかを知るために小道具を使用してみませんか? ' 'のようなものを 'componentDidMount'で' this.props.doTask'をテストできます。 –
mguijarr