Question

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

这是一个功能组件假设我想在使用此组件时在InputProps对象中添加一些内容，同时在functionalComponent内维护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注释，以上代码不起作用。下面的代码是有效的代码，但如果不是最佳方法，则使用idk。

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

将现有道具传递到组件并追加

1 个答案: