基于道具的元素的条件渲染顺序？答案

【问题标题】：conditional rendering order of the elements based on props?基于道具的元素的条件渲染顺序？
【发布时间】：2021-11-23 21:20:40
【问题描述】：

我创建了一个搜索输入组件，这个输入有一个图标，我需要根据不同的情况（它是一个引导输入组）更改图标的对齐方式（在左侧或右侧），所以我需要做的就是是改变我的 div 中元素的顺序，我需要一种干净的方法来做到这一点。我知道我可以使用三元运算来有条件地渲染我的元素，但这会导致重复代码。我正在寻找更清洁的方式，有什么建议吗？

const SearchInput = ({onClose, onChangeValue, ...restProps}) => {
    return (
        <div className='input-group'>
            <button className='btn' type='button'> //right now its on left side...
                <i className='bi bi-search'></i>
            </button>
            <Input placeholder='Search here...' onChangeValue={onChangeValue} {...restProps} />
            {onClose && <i className='bi bi-x' onClick={onClose}></i>}
        </div>
    );
};

【问题讨论】：

我相信，在这种情况下你应该使用条件渲染。但是为什么说这不是一种干净的做事方式呢？
是的，但我不知道我觉得我在以这种方式重复代码..@KavinduVIndika
所以你可以为条件渲染部分创建一个单独的组件，然后使用它。那么你可以避免重复吗？但是如果它只是一个按钮，那么我认为创建一个单独的组件是没有必要的。

标签： javascript reactjs twitter-bootstrap

【解决方案1】：

我的建议

import clsx from 'clsx';
const SearchInput = ({onClose, onChangeValue, conditionProp, ...restProps}) => {
    return (
        <div className={clsx('input-group', conditionProp && 'my-order)}>
            <button className='btn' type='button'> //right now its on left side...
                <i className='bi bi-search'></i>
            </button>
            <Input placeholder='Search here...' onChangeValue={onChangeValue} {...restProps} />
            {onClose && <i className='bi bi-x' onClick={onClose}></i>}
        </div>
    );
};

在 CSS 中

.my-order {
  flex-direction: row-reverse;
}

我喜欢 cslsx 用于条件类名，但当然我可以不用它 - conditionProp ? 'input-group my-order' : 'input-group'

【讨论】：