为什么需要 React 这段代码，我的代码可以工作？

Question

这是我的代码

const Input = props => {
  return (
    <React.Fragment>
      <label>{props.label}</label>
      <input 
        className="input" 
        type={props.type} 
        placeholder={props.placeholder}
      ></input>
    </React.Fragment>
  );
};

我想从我的应用程序中接收来自其他组件的数据。但它只适用于第一次 props 调用后的另一行代码：

    const Input = (props: { label: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined; type: string | (string & {}) | undefined; placeholder: string | undefined; }) => {
  return (
    <React.Fragment>
      <label>{props.label}</label>
      <input 
        className="input" 
        type={props.type} 
        placeholder={props.placeholder}
      ></input>
    </React.Fragment>
  );
};

有没有办法让这段代码看起来更漂亮？

谢谢！

Answer 1

我假设您对必须声明输入字段类型的部分的外观感到沮丧。

const Input = (props: { label: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined; type: string | (string & {}) | undefined; placeholder: string | undefined; }) => {

如果我是你在你的功能组件之上，我会做什么是创建一个名为 InputProps 的新 Typescript 类型并将其设置为这样，以便你的新代码如下所示：

// new stuff here
type InputProps = {
  label: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined;
  type: type: string | (string & {}) | undefined;
  placeholder: string | undefined;
}

    const Input = (props: InputProps) => {
  return (
    <React.Fragment>
      <label>{props.label}</label>
      <input 
        className="input" 
        type={props.type} 
        placeholder={props.placeholder}
      ></input>
    </React.Fragment>
  );
};

这将是整理此代码的最佳方法，在您的函数中不包含类型定义，而是作为一个单独的类型对象。