React根据三个逻辑路径渲染各种组件

时间:2020-07-30 15:15:23

标签: javascript reactjs

当两个以上时,我真的很难理解如何根据逻辑标记渲染特定组件。通常我会写类似

do while

但是当我不能使用三进制时,它将变得更加复杂。

当我有多个选项时,编写render() { return ( isBlue ? <Blue /> : <Red /> ); } 函数的最佳方法是什么?

例如

render

如何根据const colour = myData.colour; render() { return ( <Blue /> /* or */ <Green /> /* or */ <Red /> ); } 或其他设置检查的结果选择要渲染的React组件?

6 个答案:

答案 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')}