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

Question

我玩的是独立存在的组件，样式和交互都在组件内。我正在尝试运行对某个鼠标事件进行补间，我现在正在玩，所以请忽略这些混乱。我可以设置状态以便稍后获得 dom 节点引用，但是当我尝试调用函数进行补间时，TweenLite 认为补间节点为空。

有什么想法吗？

谢谢。

哦，当我在调用函数时专门将 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'
    }
})

我已经更新了代码，如下所示，仍然没有任何乐趣。 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});
    }
}

Answer 1

如果你在 class Card 之外调用 handleHeaderMouseEnter，在这个函数中 this 指的是全局范围（在浏览器中它是 window），在 window 中没有属性 state - 它是 undefined。您应该将 this 绑定到此函数

onClick={ handleHeaderMouseEnter.bind(this) }

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

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

Example

Answer 2

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

TweenLite.to(React.findDOMNode(this.state.cHeader), 1, {css:{height:350}, ease:Power4.easeInOut});

Answer 3

这解决了它：

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

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

Getting ref to dom object to access it in React

reactjs

ref

gsap