React/React Native能否在JSX标签内实现条件渲染？求优化方案

直接在style属性内嵌入条件判断是最简洁的解决方式，能彻底避免组件代码重复：

// 方式1：极简写法，直接给style属性加三元表达式
<Custum style={switchOn ? { opacity: 0 } : null} />

当switchOn为false时传递null，React会自动忽略这个style属性，和不传递的效果完全一致；如果组件本身有默认样式，也可以传递空对象{}或者undefined，都能正常工作。

如果样式逻辑更复杂（比如需要结合基础样式+条件样式），可以提前声明样式变量，让代码结构更清晰：

// 方式2：提前定义样式变量，适合多属性场景
const baseStyle = { padding: 10, backgroundColor: '#fff' };
const customStyle = switchOn ? { ...baseStyle, opacity: 0 } : baseStyle;

<Custum style={customStyle} />

另外，React和React Native都支持数组式合并样式，这种方式在多条件样式场景下更灵活：

// 方式3：数组式条件样式（React Native推荐结合StyleSheet使用）
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  base: { padding: 10, backgroundColor: '#fff' },
  faded: { opacity: 0 }
});

<Custum style={[styles.base, switchOn && styles.faded]} />

当switchOn为true时，数组会包含styles.faded并自动合并到基础样式上；为false时，switchOn && styles.faded会返回false，React会忽略数组中的假值，只应用基础样式。

补充说明下你最初写法无效的原因：JSX属性必须遵循属性名={表达式}的语法规则，你直接把条件判断写在组件标签内（<Custum swithOn ? style={{opacity : 0}} : null />）不符合语法，正确的做法是把整个条件表达式放在style属性的大括号中。

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