ReactNative多条件渲染同时显示两个组件问题排查

问题根源 #

当options数组长度小于4时（比如长度为1、2、3），这个数值同时满足options.length < 7的判断条件，所以你的代码中Component1和Component3的渲染条件都会成立，导致两个组件同时显示。

修复方法 #

根据你的需求（长度<4显示Component1，长度>4显示Component2，长度>7显示Component3），需要明确每个组件对应的区间范围，避免条件重叠：

方式一：使用三元表达式做分支判断 #

<View>
  {options.length < 4 ? (
    <Component1 options={options} />
  ) : options.length > 4 && options.length <= 7 ? (
    <Component2 options={options} />
  ) : options.length > 7 ? (
    <Component3 options={options} />
  ) : null}
</View>

方式二：明确每个组件的区间条件 #

<View>
  {/* 长度小于4时显示 */}
  {options.length < 4 && <Component1 options={options} />}
  {/* 长度大于4且小于等于7时显示 */}
  {options.length > 4 && options.length <= 7 && <Component2 options={options} />}
  {/* 长度大于7时显示 */}
  {options.length > 7 && <Component3 options={options} />}
</View>

补充说明：如果需要处理数组长度等于4或等于7的场景，可以根据实际需求调整条件，比如把Component2的条件改为options.length >=4 && options.length <=7，确保边界值有对应的组件渲染。

内容的提问来源于stack exchange，提问作者CodingProfile