有没有办法在React上切换HTML / JSX标签？

Question

我需要根据商店中的值来更改选项卡的值。

类似这样的东西：

<Svg {!homeScreenReduxStoreState ?
     fill={focused ? Colors.tabIconSelected : Colors.tabIconDefault} :
     fill={focused ? 'blue' : 'red'}} />

还是执行此操作的最佳方法？

Answer 1

尽管这是正确的，并且通常以这种方式完成，但是JSX代码中的多个三元语句使其非常难以阅读。

我建议将这些值分配给渲染函数顶部的变量，然后在此处使用该变量而不是内联。

类似的东西：

render() {
  let fillColor = null;
  if(!homeScreenReduxStoreState) {
    fillColor = focused ? Colors.tabIconSelected : Colors.tabIconDefault; 
  } else {
    fillColor = focused ? 'blue' : 'red';
  }

  return <Svg fill={fillColor} />
}