当前，我有一个切换三元表达式的按钮，它可以正常工作，但是我无法想象为要显示数据的每一行创建一个单独的三元表达式是最佳实践。
有没有更好的方法可以在整个页面的公里数和英里数之间进行切换？我的redux商店包含相同距离的两个版本，这就是我到目前为止的内容：
const YourDistance = ({distanceInKms, distanceInMiles}) => {
const [isToggled, setToggled] = useState(false)
return (
<div>
{ isToggled ? <h2>{distanceInKms}</h2> : <h2>{distanceInMiles}</h2> }
<button onClick={() => setToggled(!isToggled)}>Convert</button>
</div>
)};
如果有人有任何想法，我将不胜感激。
您可以将单位存储为redux状态。这样，您可以具有一个选择器函数，该函数根据状态中的距离和状态中的单位返回适当的值。您可以const distance = useSelector(selectDistance)随处拨打电话。
选择器可能类似于：
const selectDistance = (state) => {
const units = state.units;
const {distanceInKms, distanceInMiles} = state.distance;
return units === "miles" ? distanceInMiles : distanceInKms;
}
因此，我们仍然有一个三元组，但是现在它只是在一个地方，而不是在任何地方。
显然，您需要执行dispatch一项操作来切换单位。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句