Javascript 将现有道具传递给组件并附加 const LNTextField=props=>{ const classes=useStylesredit（）； 返回( ); };

这是一个功能组件 假设我想在使用此组件时向InputProps对象添加一些内容，同时在functionalComponent中维护InputProps对象 我该怎么做？ 比如,

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

现在它正在覆盖组件中的InputProps

---

TIA

如何为父级的

输入道具

使用不同的道具名称？比方说，来自父级的InputProps使用

InputPropsParent

命名。您可以尝试这样做：

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

const LNTextField=props=>{
const classes=useStylesredit（）；
返回(
);
};

已更新

作为OP注释，上述代码不起作用。下面的代码是工作代码，尽管idk知道这是否是最好的方法

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

const LNTextField=props=>{
const classes=useStylesredit（）；
返回(
);
};

index.js:1375警告：React无法识别DOM元素上的

InputPropsParent

prop。如果您有意将其作为自定义属性显示在DOM中，请将其拼写为小写

inputpropsparent

。如果您不小心从父组件传递了它，请将其从DOM元素中删除。它以小写tho的形式工作，这是tho的最佳方法吗？如果不使用不同的道具名称，就无法仅附加InputProps？使用camelCased如何？它有用吗？如果有效的话，我更喜欢使用camelCased。Idk，你试过使用相同的道具名称吗？并将

…props.InputPropsParent

替换为

…props.InputProps

？抱歉，我不知道解决您问题的其他方法

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