绑定元素'string‘隐式具有'any’类型

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。请查看此question以了解更多有关这方面的信息。

同样根据错误，query.get("name")函数将返回一个可以为空的string。您可能希望在使用它之前对其进行强制转换，以确保它不为空。

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