最初のインデックス付きイメージはレンダリングされ、componentDidMountがロードアップされる前にしばらくの間画面にあるべきです。 -- javascript フィールド と reactjs フィールド 関連 問題

the first indexed image is rendered and it should be on screen for some time before componentDidMount loads up












0
vote

問題

日本語

最初のイメージとテキストがレンダリングされていて、それがレンダリングされる前でさえ、componentddidmountが呼び出されるので、画面にレンダリングされた最初のイメージが表示されません。 SetImeoutがComponentDIDMountと2番目の画像で実行されるまでの秒数がレンダリングされます。 これがオンラインで見られたフィドルコードへのリンクです。 この。2番目の画面がロードされる前にしばらくの間画面上にあります。

<事前> <コード> insert-comment0
英語

I have this code where the first image and text renders up and even before it renders , the componentdDIDmount gets called and so we don't see the first image rendered on the screen .I want it to last on screen for say 10 seconds before setimeout runs in componentdidmount and second image is rendered . Here is the link to the fiddle code which can seen online .I want this.backgrounds[0] to be on screen for some time before second screen loads .

  constructor(props){       super(props)        this.state={           currrentIndex:0,           count:0       };       this.backgroundImages=[img1,img2,img3];       this.text=[         'Personalising  an Insurance plan according to your needs',         'Adding Points to your wallet',         'Putting together Smart Financing Options',         'Personalising  an Insurance plan according to your needs',        ]    }   componentDidMount(){       // hold it in this         this.timeOut=setTimeout(           this.changeBackground,           this.props.timer       )   }   componentWillUnmount() {      if (this.timeout) clearTimeout(this.timeout)   }    changeBackground= ()=> {       // change the index and        console.log("this.state.currentIndex", this.state.currrentIndex);      this.setState(function ({ currrentIndex }) {       let nextBackgroundIndex;        nextBackgroundIndex = ++this.state.currrentIndex       return { currrentIndex: nextBackgroundIndex }     }, function () {       if(this.state.currrentIndex===4){         this.props.changefirstuserstate()       }       else{       this.timeout = setTimeout(         this.changeBackground,         this.props.timer || 5 * 1000       )     }})   }   //  else {   //    debugger   //   this.props.changefirstuserstate();   //  }  //}    render(){    console.log("index is ", this.state.currrentIndex)    if(this.state.currrentIndex===0){      return(       <ComponentWrapper>         <ImageWrapper>           {console.log('rendred index is ', this.state.currrentIndex)}           <Image src={this.backgroundImages[0] }/>           </ImageWrapper>         <Text>Adding Points to your wallet</Text>       </ComponentWrapper>   )    }    else if (this.state.currrentIndex ===1){      return(       <ComponentWrapper>         <ImageWrapper>           {console.log('rendred index is ', this.state.currrentIndex)}           <Image src={this.backgroundImages[1] }/>           </ImageWrapper>         <Text> Putting together Smart Financing Options</Text>       </ComponentWrapper>   )    }    else{      return(       <ComponentWrapper>         <ImageWrapper>           {console.log('rendred index is ', this.state.currrentIndex)}           <Image src={this.backgroundImages[2] }/>           </ImageWrapper>         <Text>Personalising  an Insurance plan according to your needs</Text>       </ComponentWrapper>   )    }   } } export default SplashScreen```  
</div
     
     
     

回答リスト


関連する質問

1  ReactJS-BootstrapフォームとH1タグを並べて配置する方法  ( How can i put a reactjs bootstrap form and h1 tag side by side ) 
私は私のフォームグループと私のh1タグを横々と横々としたいです。私はディスプレイを使ってみました:インラインブロックと他のさまざまなもののものですが運がなかった。これが私の.cssコードです: <事前> <コード> .testingForm { max-w...

0  Charts RecativeJSを使用してレンダリングのAPIからデータオブジェクトを表示するためのFor Loopを作成します。  ( Make a for loop to show data object from api in render using charts reactjs ) 
チャートのAPIからデータを表示する必要があります( HTTPS) ://canvasjs.com/react-charts/chart-index-data-label/ ) これは私のAPIの前部: <事前> <コード> //API Gains stat...

0  クラスベースのAXIOS要求をフックベースのコードに統合する  ( Integrating class based axios request to the hook based code ) 
このクラスベースのAXIOSリクエストをJSONファイルからデータを取得する他のフックベースのコードに統合する方法基本的に私はデータソースの場所をAXIOS GETリクエストと置き換えたいです。ありがとう。 <事前> <コード> componentDidMou...

1  Vanilla JavaScriptを使用してReact App DOMに追加する方法  ( How to append to a react app dom using vanilla javascript ) 
私は私が任意のウェブサイトからテキストを強調することを可能にするクロム拡張を作成しています。 あなたにアイデアを与えるために <事前> <コード> var newDom = document.body.innerHTML; var selection = wi...

2  Next.jsとTypeScriptでReact StyleGuidistを設定する  ( Setting up react styleguidist with next js and typescript ) 
私はnext.jsとtypescriptでReact Styleguidistをセットアップしようとしていますが、問題に歩き続けます。 My現在のstyleguide.config.jsは次のようになります: <事前> <コード> const path = r...

0  反応 - 両親にアクセスする子供たちは早すぎる?  ( React children accessing parents state too early ) 
子からapp.jsにコールバックを使用する場合、app.jsのコールバック関数は要素の状態を設定します。 同じ子関数で、次の行で、関数はこの状態にアクセスします。これはPROPとして渡されます。 この次の行がすでに更新された状態で実行されていることを確認する方...

0  Reactでフォームを送信する方法  ( How to submit a form in react ) 
反応成分のフェッチで反応成分にはない形式を送ることができるかどうかを知りたいのです。 <事前> <コード> <form action="json.bc" class="form_search" method="post"> <input type="hid...

0  共有可能なパネルのURLを反応させる  ( React sharable panel url ) 
次のスニペットを検討してください。今すぐボタンをクリックするde 'IE indexroot 私が達成したいのは: "href="http://localhost:3000/de/?open" http:// localhost:3000 / de /? ...

0  Mock Dispatch関数は呼び出されません  ( Mock dispatch function is not called ) 
非同期アクション作成者のテストを書いていますが、「推定モック機能が「と呼ばれている」と述べた問題に遭遇しました: <事前> <コード> [{"type": "GET_LOGIN_SUCCESS", "value": true}] しかしそれは呼ばれなかっ...

84  React Statelessコンポーネントのイベントハンドラ  ( Event handlers in react stateless components ) 
React Statelessコンポーネントでイベントハンドラを作成するための最適な方法を見つけようとしています。私はこのようなことができる: <事前> <コード> const myComponent = (props) => { const myH...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有