时间戳

首页 > 解决方案 > 如何通过捷径控制道具？

javascript - 如何通过捷径控制道具？

问题描述

我想知道我们怎样才能使这个案例变得容易？

我有一个自定义的 Typeahead 组件，这将对我的自定义进行一些操作。所以我想通过 TypeaheadCustom 组件的 props 来控制 Typeahead 的 props：

在组件中，我调用 TypeaheadCustom ：

<TypeaheadCustom propsControler />

在 TypeaheadCustom 组件中：

function TypeaheadCustom({ propsControler ,children, ...otherProps }, ref) {
    if(propsControler=== true) { //make some propsOfTypeahead}
        return (
            <Fragment>
                <Typeahead ref={ref} {...otherProps} //propsOfTypeahead>
                    {children}
                </Typeahead>
            </Fragment>
        );
    }
}

我想要完全这样做，因为我想要它干净。我们怎样才能做到这一点？谢谢

标签： javascriptreactjsreact-propstypeahead

解决方案

您可以为此编写一个 HoC。在 HoC 中，您通过 propsControler。如果为真，则返回组件，否则返回 null。这是伪代码

`

function TypeaheadCustom(propsControler, childrenComponent, ref) {
    return propsControler === true ? (<Fragment>
        <Typeahead ref={ref} {...otherProps}> //propsOfTypeahead>
        {<childrenComponent />} // It shall have the props of its own 
            </Typeahead>
    </Fragment>) : null
}
}

`

推荐阅读