使用打字稿在 React router v6 中将状态作为道具传递

Question

请原谅我的无知，因为我是 React router v6 和 Typescript 的新手。我正在尝试传递一个状态和一个函数，它们将改变我的应用程序数据流中的状态。

const [playerSystem, setPlayerSystem] = useState<String>("Cheese")
      <UImaster />
    
      <Routes>
        <Route path="/sectora" element={<SectorView  {...playerSystem} /> } />
</Routes>

然而，当我这样做时，如果我将 playerSystem 和 setPlayerSystem 都放入元素的道具中，它会抛出错误。目前我的 SectorView 组件正在抛出这个难以置信的不清楚的错误。

Type '{ toString(): string; charAt(pos: number): string; charCodeAt(index: number): number; concat(...strings: string[]): string; indexOf(searchString: string, position?: number | undefined): number; ... 44 more ...; Symbol.iterator: IterableIterator<...>; }' has no properties in common with type 'IntrinsicAttributes'.

如何将状态和状态更改功能传递给其他组件？

Answer 1

<SectorView />组件中是否定义了Props类型？

Answer 2

playerSystem 是一个字符串，所以你不能通过传播它作为道具传递。错误消息是在一个字符串上列出所有属性并抱怨它们不匹配 IntrinsicAttributes，这是一种令人困惑的方式来引用您可以作为道具传递给 HTML 元素的事物集.

这就是您将这些值作为道具传递的方式：

<SectorView playerSystem={playerSystem} setPlayerSystem={setPlayerSystem} />

一般来说，传播确实适用于字符串，但对于 props，我相信只有对象会起作用，因为 props 是一组键和值。因此，例如，这等同于上面的内容：

const [playerSystem, setPlayerSystem] = useState<String>("Cheese")
const props = { playerSystem, setPlayerSystem }

<SectorView {...props} />

请注意，对于 { playerSystem: playerSystem, setPlayerSystem: setPlayerSystem }，{ playerSystem, setPlayerSystem } 是 shorthand。

我猜想当您尝试包含 setPlayerSystem 时它根本不起作用的原因是您正在做 {...setPlayerSystem} 并且您永远无法传播函数。使用 playerSystem 它可以让你进行传播，因为字符串允许这样做，但是 SectorView 不知道如何处理它，这就是错误来自那里的原因。

这里是传播如何（独立于 JSX）对象、字符串和数组的例子。

const obj1 = { a: 1 }
const obj2 = { b: 2 }

console.log({ ...obj1, ...obj2 }) // { a: 1, b: 2 }

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]

console.log([...arr1, ...arr2]) // [1, 2, 3, 4, 5, 6]

const str1 = "ab"
const str2 = "cd"

console.log([ ...str1, ...str2]) // ["a", "b", "c", "d"]

使用打字稿在 React router v6 中将状态作为道具传递

Passing state as a prop in React router v6 with typescript

javascript

typescript

reactjs

react-router