我創建了一個搜索輸入組件，這個輸入有一個圖示，我需要根據不同的情況（它是一個引導輸入組）更改圖示的對齊方式（在左側或右側），所以我需要做的就是更改我的 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>
);
};
uj5u.com熱心網友回復：
我的提議
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'
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/320846.html
標籤：javascript 反应 推特引导
上一篇：全寬三列行上的水平滾動條