为什么“名称”没有传递给 React 组件？

Question

'name'参数是否唯一，为什么不通过？

我有一个名为Input 的组件。这是它的界面：

interface Props {
    className?: string
    colour?: ThemeColour
    multiLine?: boolean
    keyPath?: (string | number)[]
    onChangePrio?: Function
    onBlurPrio?: Function
    valuePrio?: any
    isInt?: Boolean
    isFloat?: Boolean
    formState?: any
    setFormState?: Function
    name?: string
}
const Input = ({
    className = '',
    multiLine = false,
    keyPath,
    onChangePrio,
    onBlurPrio,
    valuePrio,
    isInt,
    isFloat,
    formState,
    setFormState,
    name,
    ...rest
}: Props) => {
    console.log('n1', name)

这里叫：

<InputGroup title="Egyéb információ">
<Input
    formState={formState}
    setFormState={setFormState}
    name="additionalInfo"
    placeholder="pl. Szállással"
/>
</InputGroup>

可选参数不设置为 undefined 或 null 有问题吗？

我只看到这些重复的行：

n1 undefined
n1 undefined
n1 undefined
n1 undefined
n1 undefined
n1 undefined
n1 undefined
n1 undefined

为什么，尽管name 至少在一种情况下通过了。

Answer 1

不，这当然不是问题。您在使用组件时未定义的任何道具将只是组件内的undefined（除非被例如defaultProps 覆盖）。

function Greet({ name }: { name?: string }) {
  return <div>Hello, {String(name)}</div>;
}

export default function App() {
  return (
    <div className="App">
      <Greet name="János" />
      <Greet />
    </div>
  );
}

将渲染

Hello, János
Hello, undefined