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

Question

我有一个简单的 material 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>

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

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

我怎样才能有条件地只更新一行？这里是codesandbox link

Answer 1

创建一个 isRow 状态并使用它的值有条件地将 RadioGroup 呈现为行或其他方式

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

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