如何在反应中使用三元操作符呈现条件jsx ?



我想使用三元运算符来使用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;
);
};

我应该注意到,仅仅添加一个sname有效,但对英语中的许多其他名词(例如busmouse)不起作用。遗憾的是,在英语中使用复数在实践中相当复杂。不要只接受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)
}
);
}

相关内容

  • 没有找到相关文章

最新更新