Reactjs 获取对dom对象的引用以在React中访问它

我在玩独立的组件，所有的样式和交互都在组件中。我正在尝试在某个鼠标事件上运行tween，我现在只是在玩，所以请忽略混乱。我可以设置状态，以便稍后获取dom节点引用，但是当我尝试调用一个函数来调用then tween时，TweenLite认为to tween的节点为null

有什么想法吗

谢谢

哦，当我在调用函数时专门将ref作为属性传入时，该函数会在组件加载后立即运行

import React, {Component, PropTypes} from 'react';
var ReactDOM = require('react-dom');
var Stylesheet = require('react-style');

export default class Card extends Component {
    constructor(props) {
        super(props);
        //  Set state here if required.
        this.state = {Width: this.props.width, Height: this.props.height, cHeader:''};
    }

    componentDidMount() {
        //  This method is called when an instance of this component is created.
        console.log('New Card instance created.');
        this.setState({
            cHeader: this.refs.cardHeader
        });
    }

    render() {

        return (
            <div styles={[styles.card]}>
                <div ref="cardHeader" styles={[styles.cardHeader]} onClick={handleHeaderMouseEnter}></div>
            </div>
        )
    }
}

Card.propTypes = {width: React.PropTypes.number, height: React.PropTypes.number};
Card.defaultProps = {width: 350, height: 150};

function handleHeaderMouseEnter() {
    console.log("Did this run?");
    TweenLite.to(this.state.cHeader, 1, {css:{height:350}, ease:Power4.easeInOut});
}

var styles = Stylesheet.create({
    card: {
        overflow: 'hidden',
        width:350,
        height: 250,
        backgroundColor: '#E74C3C',
        borderRadius: 5,
        WebkitBoxShadow: "3px 3px 4px 1px rgba(196,196,196,1)",
        marginBottom: 25
    },
    cardHeader: {
        width: 350,
        height: 50,
        borderTopLeftRadius: 5,
        borderTopRightRadius: 5,
        backgroundColor: '#3498DB'
    }
})

import React，{Component，PropTypes}来自'React'；
var ReactDOM=require（'react-dom'）；
var Stylesheet=require（'react-style'）；
导出默认类别卡扩展组件{
建造师（道具）{
超级（道具）；
//如果需要，在此处设置状态。
this.state={Width:this.props.Width，Height:this.props.Height，cHeader:'}；
}
componentDidMount（）{
//创建此组件的实例时，将调用此方法。
log（'创建了新的卡实例'）；
这是我的国家({
cHeader:this.refs.cardHeader
});
}
render（）{
返回(
)
}
}
Card.propTypes={宽度：React.propTypes.number，高度：React.propTypes.number}；
Card.defaultProps={宽度：350，高度：150}；
函数handleHeaderMouseEnter（）{
log（“这运行了吗？”）；
to（this.state.cHeader，1，{css:{height:350}，ease:Power4.easeInOut}）；
}
var styles=Stylesheet.create({
卡片：{
溢出：“隐藏”，
宽度：350，
身高：250，
背景颜色：“#E74C3C”，
边界半径：5，
WebkitBoxShadow：“3px 3px 4px 1px rgba（196,1）”，
marginBottom:25
},
卡片头：{
宽度：350，
身高：50，
borderTopLeftRadius:5，
BorderTopRight半径：5，
背景颜色：“#3498DB”
}
})

我已经更新了代码，如下所示，仍然没有乐趣。TweenLite仍在努力寻找DOM节点

export default class Card extends Component {
    constructor(props) {
        super(props);
        //  Set state here if required.
        this.state = {Width: this.props.width, Height: this.props.height, cHeader:''};
    }

    componentDidMount() {
        //  This method is called when an instance of this component is created.
        console.log('New Card instance created.');
        this.setState({
            cHeader: (this.refs.cardHeader)
        });
    }

    render() {

        return (
            <div styles={[styles.card]}>
                <div ref="cardHeader" styles={[styles.cardHeader]} onClick={this.handleHeaderMouseEnter}></div>
            </div>
        )
    }

    handleHeaderMouseEnter() {
        console.log("Did this run?");
        TweenLite.to(React.findDOMNode(this.state.cHeader), 1, {css:{height:350}, ease:Power4.easeInOut});
    }
}

导出默认类别卡扩展组件{
建造师（道具）{
超级（道具）；
//如果需要，在此处设置状态。
this.state={Width:this.props.Width，Height:this.props.Height，cHeader:'}；
}
componentDidMount（）{
//创建此组件的实例时，将调用此方法。
log（'创建了新的卡实例'）；
这是我的国家({
cHeader：（此。参考。卡片标题）
});
}
render（）{
返回(
)
}
handleHeaderMouseEnter（）{
log（“这运行了吗？”）；
to（React.findDOMNode（this.state.cHeader），1，{css:{height:350}，ease:Power4.easeInOut}）；
}
}

如果您调用

handleHeaderMouseEnter

类外

卡

，在这个函数中

这个
指的是全局范围（在浏览器中它是
窗口
），在
窗口
中没有属性
状态
-它是
未定义的
。您应该将此
绑定到此函数

onClick={ handleHeaderMouseEnter.bind(this) }

另外，如果您将
handleHeaderMouseEnter
移动到类中，您还需要将
this
设置为此方法

onClick={ this.handleHeaderMouseEnter.bind(this) }

我认为Tween需要一个DOM节点，而您正在向它传递一个react组件。试试这个：

TweenLite.to（React.findDOMNode（this.state.cHeader），1，{css:{height:350}，ease:Power4.easeInOut}）
这解决了它：

<div ref="cardHeader" styles={[styles.cardHeader]} onClick={this.handleHeaderMouseEnter.bind(this)}></div>

我认为这也会起作用。但我得到了完全相同的错误。它无法读取null的状态。不确定什么是null，类的实例存在。