Question

我有一个组件，并且尝试引用DOM节点。我可以通过以下方式获取节点和子节点：

export class AutoScrollTarget extends React.Component {
    constructor(props) {
        super(props);

        this.targetId = props.targetId;
    }

    componentDidMount() {
        console.log(this.refs.target);
    }

    render() {
        return (
            <div ref="target">
                {this.props.children}
            </div>
        );
    }
}

问题是页面上将有很多组件，我希望ref值为“ this.targetId”。

我尝试了以下方法：

render() {
    return (
        <div ref={this.targetId}>
            {this.props.children}
        </div>
    );
}

是否有一种简单而干净的方法？

Answer 1

您可以使用ref callback，该函数在装入元素时通过DOM节点调用，而在卸载元素时通过null调用。

示例

render() {
    return (
        <div ref={ref => this.targetId = ref}>
            {this.props.children}
        </div>
    );
}

使用ID作为属性值反应ref

1 个答案: