Как передать ref из родительского элемента в детей - PullRequest
Новая
       26

Как передать ref из родительского элемента в детей

1 голос
/ 28 апреля 2020

Я столкнулся с проблемой, которая вызывает много головных болей, и я просто не могу ее решить. У меня есть компонент, который используется во всем приложении (всего около 100 раз), и основная цель его состоит в том, чтобы отобразить некоторый список на основе потомков (потомок - это функция, которая возвращает дочерний компонент) и полезную нагрузку. (полезная нагрузка - это массив объектов, в котором хранится информация о будущих дочерних элементах) . 

<GenericList
    children={this.renderElement}
    payload={this.state.treeData}
    // other props...
/>

Здесь находится банка renderElement

renderElement = (role) => {
        return (
            <BaseListItem>
                <div className="fb jCenter">
                    <Text
                        title={role.Name}
                    >
                        {role.Name}
                    </Text>
                </div>
            </BaseListItem>
        );
    };

renderElement оба возвращают RF C или R CC. Внутри GenericList Я должен как-то управлять этим, чтобы передать ref в RF C или R CC. Часть кода, которая реализует эту логику c - это 

cloneChildrenElement({ payload, children, selected, payloadSortBy }) {
    if (payload && payload.length) {
        const { selectBy, scrollToIndex, idToScrollIndex } = this.props;
        const data = sortPayload(payload, payloadSortBy);

        return data.map((item, index) => {
            return cloneElement(children(item), {
                item,
                isActive,
                key: index,
                onDoubleClick: this.handleDblClick,
                ref: (node) => {
                    console.log(node, 'node');
                    if (Number.isInteger(scrollToIndex) || isActive) {
                        this.genericContentSelected = node;
                    }
                },
            });
        });
    }
    return false;
}

Я также пытался реализовать переадресацию ссылок, но в этом случае я должен вручную сделать это для всех компонентов, которые используют эту логи c. Я хочу знать, возможно ли достичь этого, только внося изменения в компонент GenericList.

...