我怎样才能通过短方式控制道具？

问题描述

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

我有一个自定义的 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>
        );
    }
}

我想要这样做，因为我想要它干净。我们怎么做？谢谢

解决方法

您可以为此编写一个 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
}
}

`

,

您可以在条件内创建对象，并将该对象作为道具传递

function TypeaheadCustom({ propsControler,children,...otherProps },ref) {
    if(propsControler=== true) { 
        const propsOfTypeahead = {prop1: 1,prop2: 2}
        return (
            <Fragment>
                <Typeahead ref={ref} {...otherProps} {...propsOfTypeahead}>
                    {children}
                </Typeahead>
            </Fragment>
        );
    }
}