获取动态组件的引用

Question

我有一个像这样的组件

const mapping = {
    'a': <span>AAA</span>,
    'b': <span>BBB</span>,
};

class MyComponent extends React.Component<Props> {
    render() {
        return (
            <Fragment>
                {mapping[this.props.key]}
            </Fragment>
        );
    }
}

我很想知道是否有可能获得{mapping[this.props.key]}的结果元素的引用

有没有办法做到这一点？我对创建其他包装器只有几个主意。

谢谢！

Answer 1

我认为这两种方法都是正确的答案：

1：使用开关盒来获取正确的组件并为其提供ref功能

getIcon = (key, saveRef) => { 
    switch(key) {
        case 'a': return <span ref={setRef}>AAA<span/>
    }
}

2：@givehug的方法将映射的值保留为接受save ref函数并返回组件的函数

const mapping = { 'a': setRef => <span ref={setRef}>AAA</span> }; mapping[this.props.key](this.setRef)