当两个以上时,我真的很难理解如何根据逻辑标记渲染特定组件。通常我会写类似
do while
但是当我不能使用三进制时,它将变得更加复杂。
当我有多个选项时,编写render() {
return (
isBlue ? <Blue /> : <Red />
);
}
函数的最佳方法是什么?
例如
render
如何根据const colour = myData.colour;
render() {
return (
<Blue />
/* or */
<Green />
/* or */
<Red />
);
}
或其他设置检查的结果选择要渲染的React组件?
答案 0 :(得分:3)
由于您的问题涉及2个以上的问题,而不仅仅是3个问题,因此这是使用地图这样的好地方。没有开关,没有,并且它是高性能的。
let colorComponents = {
'blue': <Blue />
'green': <Green />
'red': <Red/>
'yellow': <Yellow />
}
render() { // Can pass null or what ever fallback component you prefer
return colorComponents[myData.colour] || null;
}
答案 1 :(得分:0)
您可以将支票移到渲染器内部,但在返回之前。因此,您可以执行以下操作:
const colour = myData.colour;
let content;
if (isBlue) {
content = <Blue />
} else if (isRed) {
content = <Red />
} else {
content = <Green />
}
return <div>{content}</div>
您也可以将其重构为基于colour
的交换机。
答案 2 :(得分:0)
做这样的链接
let isBlue = 'blue';
console.log( isBlue == 'red' ? 'red': isBlue == 'blue' ? 'blue' : isBlue == 'green' ? 'green' : 'none' )
答案 3 :(得分:0)
您可以基于两个条件来做类似的事情
const colour = myData.colour;
render() {
return isBlue ? <Blue /> : isGreen ? <Green /> : <Red />;
}
答案 4 :(得分:0)
尝试这样的事情。
const color = myData.colour;
render() {
return (
{colour.Blue? <Blue />}
/* or */
{colour.Green? <Green />}
/* or */
{colour.Red? <Red /> }
);
}
答案 5 :(得分:0)
如果选项很多,则可以将逻辑导出到函数中;如果您不喜欢switch
,也可以使用if-else
语句。
const renderComponent = color => {
switch(color) {
case 'red':
return <Red />
case 'blue':
return <Blue />
case 'green':
return <Green />
default:
return null
}
}
,然后在您的render
函数中
{renderComponent('blue')}