1

我正面临一个导致很多头痛的问题，但我无法解决它。我有一个在整个应用程序中使用的组件（总共大约 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都可以返回 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组件内部进行更改来实现这一点。

4

0 回答 0