如何在jsx中有条件地添加属性

问题描述

我有一个简单的主要UI RadioGroup代码，我想有条件地在行和列中显示，默认模式是列，下面是我的代码

 <RadioGroup
  aria-label="gender"
  name="gender1"
  value={value}
  onChange={handleChange}
>
  <FormControlLabel value="female" control={<Radio />} label="Female" />
  <FormControlLabel value="male" control={<Radio />} label="Male" />
  <FormControlLabel value="other" control={<Radio />} label="Other" />
</RadioGroup>

现在要在行中显示它，我需要在row处添加一个RadioGroup，如下所示

<RadioGroup
  row
  aria-label="gender"
  name="gender1"
  value={value}
  onChange={handleChange}
>

我该如何有条件地更新一行？这是codeandBox link

解决方法

创建一个isRow状态，并使用其值有条件地将RadioGroup渲染为行或其他方式

const [isRow,setIsRow] = useState(true);

<RadioGroup
  row={this.state.isRow}
  aria-label="gender"
  name="gender1"
  value={value}
  onChange={handleChange}
>