React 无法识别 DOM 元素上的 `InputProps` 属性

Question

警告：React 无法识别 DOM 元素上的 InputProps 属性。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写 inputprops。如果您不小心从父组件传递了它，请将其从 DOM 元素中移除。

我不明白我做错了什么。我见过很多类似的问题。但我找不到合适的解决方案。

<TextField
  {...input}
  {...rest}
  name={input.name}
  inputRef={inputRef}
  autoFocus={inputRef.current === document.activeElement}
  disabled={disabled || false}
  multiline={rowCount ? true : false}
  style={{
    width: "100%",
  }}
  onChange={(event) => {
    input.onChange(event.target.value);
  }}
  {...(hesapla
    ? {
        onBlur: (e) => {
          hesapla({ name: input.name, value: input.value });
        },
        onKeyDown: (e) => {
          if (e.key === "Enter") {
            hesapla({ name: input.name, value: input.value });
            e.preventDefault();
          }
        },
      }
    : {})}
  InputProps={{
    classes,
    ...(inputComponent ? { inputComponent: inputComponent } : {}),
    ...(endAdornment ? { endAdornment: endAdornment } : {}),
  }}
  inputProps={{
    style: {
      maxHeight: (rowCount * 16).toString() + "px",
      overflow: "auto",
      ...(rightJustify ? { textAlign: "end" } : {}),
      ...(!readOnly && hesapla
        ? { fontWeight: "bold", borderBottom: "2px solid" }
        : {}),
    },
    readOnly: readOnly ? readOnly : false,
  }}
></TextField>

Answer 1

问题在于您的InputProps 对象，根据文档，它使用object，您没有将正确的对象传递给它。

所以，如果你想解决这个问题，我建议你将你的 InputProps 条目创建为一个变量并记录它：

const myInputPropsObject = {
    classes,
    ...(inputComponent ? { inputComponent: inputComponent } : {}),
    ...(endAdornment ? { endAdornment: endAdornment } : {}),
  }

console.log(myInputPropsObject)

注意：空对象的销毁会导致Uncaught SyntaxError: Invalid or unexpected token问题。

检查：

const myObject = {
  name: 'testName',
  ...{},
}