Question

我正面临一个引起很多头痛的问题，而我却无法解决。我有一个在整个应用程序中使用的组件（总计约100次），其主要目的是基于子（children是一个返回子组件的函数）呈现一些列表的对象有效负载（有效负载是一个对象数组，其中包含有关未来子代的信息）。

<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都可以返回RFC或RCC。在GenericList内部，我应该以某种方式对其进行管理，以将ref传递给RFC或RCC。实现该逻辑的代码部分就是这个

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;
}

我也曾尝试实现ref转发，但是在那种情况下，我应该为使用该逻辑的所有组件手动执行。我想知道是否有可能仅通过在GenericList组件内部进行更改来实现。

如何将ref从父元素传递给子元素

0 个答案: