Получить Ref динамического компонента

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 'Подход к сохранению значений отображения в виде функций, которые принимают функцию сохранения ссылки и возвращают компонент

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