将现有道具传递给组件并附加

Question

const LNTextField = props => {
  const classes = useStylesReddit();
  return (
    <TextField
      variant="filled"
      InputProps={{ classes, disableUnderline: true }}
      {...props}
    />
  );
};

这是一个功能组件 假设我想在使用这个组件时向 InputProps 对象添加一些东西，同时在功能组件中维护 InputProps 对象 我怎样才能做到这一点？ 例如；

<LNTextField
                InputProps={{
                  endAdornment: (
                    <InputAdornment
                      className={styles.optionalAppendedText}
                      position="end"
                    >
                      Optional
                    </InputAdornment>
                  )
                }}/>

现在它覆盖了组件中的 InputProps

TIA

Answer 1

如何为InputProps 使用与父级不同的道具名称？假设，来自父级的 InputProps 以InputPropsParent 命名。而且，您可以尝试这样做：

const LNTextField = props => {
  const classes = useStylesReddit();
  return (
    <TextField
      variant="filled"
      InputProps={{ ...props.InputPropsParent, classes, disableUnderline: true }}
      {...props}
    />
  );
};

更新

作为 OP 评论，上面的代码不起作用。下面的代码是工作代码，尽管这是否是最好的方法。

const LNTextField = props => {
      const classes = useStylesReddit();
      return (
        <TextField
          variant="filled"
          InputProps={{ ...props.inputpropsparent, classes, disableUnderline: true }}
          {...props}
        />
      );
    };