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

Question

I have a React component that consists of other components and uses semantic-ui-react . It looks like:

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
...

And a plenty of stuff inside that I show by ... . What I want is to have another component RadioGroupVertical that would be almost identical to the RadioGroup shown above except it should have group property on InlineFormGroup . I kind of do not want to copy-paste large component to do such a small edit but not sure how to do such property modification.

Answer 1

not sure if I understood exactly but:

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

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