绑定元素“字符串”隐式具有“任何”类型

Question

我有这样的代码：

function Child( { name: string } ) {
  return (
    <div>
      {name ? (
        <h3>
          The <code>name</code> in the query string is &quot;{name}
          &quot;
        </h3>
      ) : (
        <h3>There is no name in the query string</h3>
      )}
    </div>
  );
}

我得到了：

我试图以多种方式传递名称name文字，但 TypeScript 总是很复杂，知道如何让 TypeScript 开心吗？

代码取自： https://reactrouter.com/web/example/query-parameters

Answer 1

function Child(name: { name: String}) { ...
/// ^ this is not typing the props, 
/// it's typing the first parameter called name

要正确键入 React 道具，您必须这样做。

function Child({name}: {name: string}) { ...

您可能还想使用类型string而不是包装String ，因为它们不是一回事。 建议尽可能使用string 。 查看此问题以获取更多信息。

同样根据错误， query.get("name") function 正在返回一个可为空的string 。 您可能想在使用它之前对其进行转换，以确保它不是 null。

<Child name={query.get("name") as string} />