非同期データでreactjを使ってdivを操作しようとしています

Question

reactjsを使ってdivをアニメーション化しようとしましたが、非同期データをredux経由で使用しようとしましたが、いつ仮想DOMを参照できますか。

私の場合、IDがheaderのdivがあります。ここには、データが移入されたときにコンテナをプッシュダウンしたいと考えています。

私はCannot read property 'style' of undefinedを取得するよりも、componentDidMountはまだ私は状態で、この場合に対処するにはどうすればよい負荷時のコンテナの

class HomePage extends React.Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      sliderLength: null 
     } 
    } 

    componentDidMount() { 
     this.props.actions.getSlides() 


     if(this.header) { 

      setTimeout(function() { 
       this.header.style.bottom = -(this.header.clientHeight - 40) + 'px'; 
      }, 2000); 
     } 
      //header.style.bottom = -pushBottom+'px'; 

    } 


    componentWillReceiveProps(nextProps) { 
     let {loaded} = nextProps 
     if(loaded === true) { 
      this.animateHeader() 
     } 
    } 

    animateHeader() { 

    } 

    componentWillMount() { 
     const {slides} = this.props; 
     this.setState({ 
      sliderLength: slides.length, 
      slides: slides 
     }); 
    } 


    render() { 
     const {slides, post, loaded} = this.props; 

     if(loaded ===true) { 

      let sliderTeaser = _.map(slides, function (slide) { 
       if(slide.status === 'publish') { 
        return <Link key={slide.id} to={'portfolio/' + slide.slug}><img key={slide.id} className="Img__Teaser" src={slide.featured_image_url.full} /></Link> 
       } 
      }); 

      let about = _.map(post, function (data) { 
       return data.content.rendered; 
      }) 

      return (
       <div className="homePage"> 
        <Slider columns={1} autoplay={true} post={post} slides={slides} /> 

        <div id="header" ref={ (header) => this.header = header}> 
         <div className="title">Title</div> 
         <div className="text-content"> 
          <div dangerouslySetInnerHTML={createMarkup(about)}/> 
         </div> 

         <div className="sliderTeaser"> 
          {sliderTeaser} 
         </div> 

         <div className="columns"> 
          <div className="column"></div> 
          <div className="column"></div> 
          <div className="column"></div> 
         </div> 

        </div> 

        <div id="bgHover"></div> 
       </div> 
      ); 
     } else { 
      return <div>...Loading</div> 
     } 

    } 
} 

function mapStateToProps(state) { 
    return { 
     slides: state.slides, 
     post: state.post, 
     loaded: state.loaded 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
     actions: bindActionCreators(slidesActions, dispatch) 
    }; 
} 

function createMarkup(markup) { 
    return {__html: markup}; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(HomePage); 

への参照を持つので、私はcomponentDidMountにしようとすると？

私はあなたがあなただけのJavaScriptの昔ながらを使用this.headerでアクセスしようとしている理由のdivをアニメーション化しようとしている場合

componentDidUpdate() { 
     if(this.header) { 
      setTimeout(function() { 
       this.header.style.bottom = -(this.header.clientHeight - 35) + 'px'; 
      }, 2000); 
     } 
    } 

Answer 1

通常、可能な限りrefを使用しないでください。これは、あなたがReactを初めて使う人にとっては特に難しいですが、いくつかのトレーニングでは、あなたはそれを必要としないでしょう。

あなたがやっているようなスタイルを変更する際の問題は、コンポーネントが再びレンダリングされるときに変更が上書きされることです。

新しいstateプロパティ、たとえばstate.isHeaderOpenを作成します。あなたのrender方法では、例えば、このヘッダーの値に応じて異なるヘッダーをレンダリングします。：

render() { 
    const {isHeaderOpen} = this.state 
    return (
    <header style={{bottom: isHeaderOpen ? 0 : 'calc(100% - 40px)'}}> 
) 
} 

をここで私は、ヘッダの完全な高さを得るためにパーセント値を持つcalcを使用しています。

次に、あなたのcomponentDidMount単に更新状態に：

componentDidMount() { 
    setTimeout(() => this.setState({isHeaderOpen: false}), 2000); 
} 

このように、コンポーネントはなく、更新されたスタイルと再びレンダリングされます。

もう1つの方法は、新しいstate値を作成する代わりに、データが読み込まれているかどうかを確認することです。たとえば、ユーザーのリストをロードしているとします。renderには、const isHeaderOpen = this.state.users != nullと書きます。

Answer 2

右の回避策であれば必ず解決策が見つかりましたがない間document.getElementById('header')そしてあなたはdivで遊ぶことができます。