尝试在异步数据上使用reactjs操作div

我尝试通过redux使用异步数据通过reactjs为div设置动画，但我不清楚何时可以在状态

加载
时引用虚拟dom

在我的例子中，我有一个id为
header
的div，在填充数据时，我希望在其中按下容器

如果我尝试使用componentDidMount，我会得到
无法读取未定义的属性'style'，因为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);

如果您试图设置一个div的动画，为什么要通过
这个.header
来访问它呢？只需使用javaScript的普通的
文档.getElementById（'header'）
，然后您就可以玩div了。
一般来说，尽量避免使用
ref
。如果你是新手，但经过一些训练，你会发现自己不需要这样做，这就特别困难

像您这样修改样式的问题是，当组件再次渲染时，您所做的更改将被覆盖

我将创建一个新的
state
属性，比如
state.ishaderopen
。在
render
方法中，您将根据此标头的值以不同方式渲染标头，例如：

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

这样，组件将再次渲染，但使用更新的样式

另一种方法是检查数据是否已加载，而不是创建新的
状态
值。例如，假设您正在加载用户列表，在
render
中，您将编写
const-ishaderopen=this.state.users！=空
I没有标题。为什么你认为那会有一些不同。是的，我已经试过了，不会奏效。谢谢你的反馈！我已经有了一个状态变量，它是由redux（
loaded
）操作提供的，我想依赖它。新的状态变量如何知道是否加载了异步数据？如果加载了
变量
，则可以在
render
方法中访问该变量。只需执行
const ishaderopen=this.state.loaded
，然后代码就相同了。如果您正在学习React，我建议您不要在开始时使用Redux。只需使用组件的内部状态。一旦您了解了工作原理，就可以添加Redux或其他状态管理器。掌握所有的概念会容易得多。好的，这会起作用，但这不允许我对DOM元素进行计算。当我读到这篇文章时，有两种方法可以知道组件是否重新发布（`ComponentWillReceiveProps，componentDidUpdate`），我制作了一个小箱子，看看它是否有助于澄清
render () {
  const {isHeaderOpen} = this.state
  return (
    <header style={{bottom: isHeaderOpen ? 0 : 'calc(100% - 40px)'}}>
  )
}

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