如何在React中以编程方式分配和获取引用

Question

我想知道是否可以在React中以编程方式分配和获取引用。假设我想通过循环创建元素，给它们包含名称+索引的引用。我知道我可以像使用字符串一样分配它们。但是，我知道如何访问引用的唯一方法是使用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>)

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

Answer 1

是的，您可以使用ref callback来实现此目的。作为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>
    );

您可以使用bracket notation在类组件（property）上创建新的this，然后使用相同的名称（this.sig1，this.sig2）访问它。

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