覆盖 React 组件中的内部元素属性

Question

我有一个 React 组件，它由其他组件组成并使用 semantic-ui-react。看起来像：

export const RadioGroup = (props) => {
  const { value, options, label, onChange, margin, widths, ...baseProps } = props
  return (
    <InlineFormGroup margin={margin} widths={widths}>
      {/* eslint-disable-next-line jsx-a11y/label-has-for */}
      {label && <label>{label}</label>}
      {options.map(option =>
        <BaseSemanticInput
...

我在 ... 展示的里面有很多东西。我想要的是另一个组件 RadioGroupVertical 几乎与上面显示的 RadioGroup 相同，只是它应该在 InlineFormGroup 上具有 group 属性。我有点不想复制粘贴大组件来做这么小的编辑，但不知道如何做这样的属性修改。

Answer 1

不确定我是否完全理解但是：

let otherProps = {};
if(baseProps && baseProps.group) {
  otherProps.group = baseProps.group;
}

<InlineFormGroup margin={margin} widths={widths} {...otherProps}>

覆盖 React 组件中的内部元素属性

Override inner element properties in React components

reactjs

semantic-ui-react