时间戳

首页 > 解决方案 > 如何在 React 中以编程方式分配和获取 Refs

javascript - 如何在 React 中以编程方式分配和获取 Refs

问题描述

我想知道是否可以在 React 中以编程方式分配和获取 refs。假设我想通过一个循环创建元素，为它们提供由名称 + 索引组成的引用。我知道我可以使用字符串来分配它们。但是，我知道如何访问 refs 的唯一方法是使用this.refs.refname它，据我所知，它阻止我做类似this.refs.{refname + index}. 有什么办法可以做这样的事情吗？希望下面的源代码可以让您了解我在问什么。

render = () => (<div className='row signature-group'>
        <div className='col-md-1 col-xs-2'>
            <b>{this.props.signerDescription}</b>
        </div>
        <div className='col-md-4 col-xs-7'>
            {this.props.signers.map((signer, index) => <div className='text-with-line' key={index} ref={"sig" + index}>{signer}</div>)}
        </div>
        <div className='col-md-2 col-xs-3'>
            {this.props.signers.map((signer, index) => {
                return (index > 0 && this/*.refs.sig+index.value == whateverValue*/) ?
                    (<div className='text-with-line-long-name' key={index}>Date</div>) :
                    (<div className='text-with-line' key={index}>Date</div>);
            })}
        </div>
    </div>)

另外，我听说使用字符串分配 refs 被认为是遗留问题。有没有办法以更新的方式以编程方式分配参考？

标签： javascriptreactjs

解决方案

是的，您可以使用ref 回调来实现这一点。作为ref属性值传递的函数将在渲染后传递给组件的 DOM 节点一次：

    applyRef = (index, ref) => {
        this[`sig${index}`] = ref;
    };

    render = () => (
        <div className="row signature-group">
            <div className="col-md-1 col-xs-2">
                <b>{this.props.signerDescription}</b>
            </div>
            <div className="col-md-4 col-xs-7">
                {this.props.signers.map((signer, index) => (
                    <div className="text-with-line" key={index} ref={this.applyRef.bind(this, index)}>
                        {signer}
                    </div>
                ))}
            </div>
            <div className="col-md-2 col-xs-3">
                {this.props.signers.map((signer, index) => {
                    return index > 0 && this[`sig${index}`].clientHeight > 0 ? (
                        <div className="text-with-line-long-name" key={index}>
                            Date
                        </div>
                    ) : (
                        <div className="text-with-line" key={index}>
                            Date
                        </div>
                    );
                })}
            </div>
        </div>
    );

您可以使用括号表示法property在您的类组件 ( ) 上创建一个新组件this，然后使用相同的名称（this.sig1、this.sig2）访问它。

不推荐使用字符串引用，不应再使用。您refs现在直接应用于组件实例（this）。

推荐阅读