React中如何条件传递组件属性？遇upperLine未定义问题求助

看起来你遇到的问题是因为对JSX中属性的写法理解有点偏差，咱们一步步来理清楚：

错误原因分析 #

当你尝试写 {isNewDataSource && upperLine} 时，React会把 upperLine 当作一个变量去查找，但你并没有定义这个变量——你其实是想传递名为 upperLine 的属性，让它在条件满足时生效，对吧？

在JSX里，单独写属性名（比如 <DialogActions upperLine />）本质上是 upperLine={true} 的简写，它表示给组件传递一个值为true的布尔属性，组件会根据这个属性是否存在（或值是否为true）来应用对应的样式。

正确的写法 #

方式一：直接给属性赋值条件变量

这是最简洁的方式，直接把 upperLine 的值设为你的条件变量 isNewDataSource：

<DialogActions 
  upperLine={isNewDataSource} 
  className={isNewDataSource ? classes.dialogActions : ''} 
/>

当 isNewDataSource 为 true 时，upperLine 属性会被设置为 true，组件应用对应的样式；当它为 false 时，属性值为 false，大多数组件会自动忽略这种情况，不会应用样式。

方式二：使用对象展开（适合多条件属性场景）

如果你之后需要根据条件传递多个属性，可以用对象展开语法来动态生成属性：

<DialogActions 
  {...(isNewDataSource ? { upperLine: true } : {})} 
  className={isNewDataSource ? classes.dialogActions : ''} 
/>

这种写法的逻辑是：当条件满足时，展开包含 upperLine: true 的对象；不满足时，展开空对象，相当于不传递这个属性。

验证一下 #

你可以把这两种写法替换到你的代码里，应该就能解决“upperLine未找到”的报错，同时实现根据条件传递属性的需求啦。

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