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

Question

我有一个简单的材料 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 添加一个poperty row，如下所示

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

我怎样才能有条件地更新一行？这是代码框link

Answer 1

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

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

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