我想使用三元运算符来使用react和javascript来条件渲染JSX。
下面是我的代码
const Parent = () => {
return (
<Child
isChecked={true}
isMany={true}
/>
);
};
const Child = (props) => {
const name=defaultTo(props.optionName, 'name');
return (
{props.isMany
? `${props.getValue().length} ${name}${
props.getValue().length > 1 ? 's' : ''
} selected`
: props.getValue()[0].label
}
);
}
上面的代码工作了,它返回的输出像"2名选定"或"1个名称选定";基于getValue长度。这里的子组件是可重用的,isChecked prop是可选的。它可以也可以不作为prop传递给子组件。
现在,如果isChecked道具为true,我想显示像&;2 selected&;或"1 selected";这取决于getValue的长度。
我如何修改上面的代码来做到这一点。有人能帮我一下吗?谢谢。
编辑:下面是我尝试过的。
const Child = (props) => {
const name= props.isChecked ?
defaultTo(props.optionName, '')
: defaultTo(props.optionName, 'name');
return (
{props.isMany
? `${props.getValue().length} ${name}${
(props.getValue().length > 1 && !isChecked) ? 's' : ''
} selected`
: props.getValue()[0].label
}
);
}
这种方法可以工作,但如果计数超过一次,仍然显示's',因此输出如下
选择12秒被选中3 .选定…
我会在return
之前做很多工作,大致如下:
const Child = (props) => {
const {isChecked, isMany, optionName} = props;
const value = props.getValue();
const {length} = value;
const nameDisplay = isMany && `${defaultTo(optionName, "name")}${length === 1 ? "" : "s"}`;
return (
isMany
? isChecked
? `${length} selected`
: `${length} ${nameDisplay}`
: value[0].label;
);
};
我应该注意到,仅仅添加一个s
对name
有效,但对英语中的许多其他名词(例如bus
或mouse
)不起作用。遗憾的是,在英语中使用复数在实践中相当复杂。不要只接受optionName
,你可以考虑接受包括单数和复数的东西。
旁注:? :
isa三元操作符(接受三个操作数的操作符,就像二进制操作符接受两个操作数,一元操作符接受一个操作数),它是JavaScript目前唯一的三元操作符,但这可能会改变。它的专有名称是条件运算符。
可以创建另一个三元运算符
const Child = (props) => {
const name=defaultTo(props.optionName, 'name');
return (
{props.isChecked ?
props.getValue().length + " selected" :
(props.isMany
? `${props.getValue().length} ${name}${
props.getValue().length > 1 ? 's' : ''
} selected`
: props.getValue()[0].label)
}
);
}