如何将自定义接口作为 props 传递到功能性 React 组件中

Question

我已经定义了一个接口 CellState 并且我想将它作为 props 传递给一个功能组件 <Cell state={cellState} 这样：

interface CellState {
  location: [number, number];
  clicked: boolean;
  mine: boolean;
  flagged: boolean;
  neighbors: number;
}

const cellState: CellState = {
  location: [0, 0],
  clicked: false,
  mine: true,
  flagged: false,
  neighbors: 0,
} 

function Cell({ location, clicked, mine, flagged, neighbors }: CellState) {
  return(
    <div className={clicked ? 'clicked' : 'unclicked'}>
      CELL
    </div>
  )
}

上面的代码returns一个错误：Type '{ state: CellState; }' is not assignable to type 'IntrinsicAttributes & CellState'. Property 'state' does not exist on type 'IntrinsicAttributes & CellState'. TS2322

但是，当我以这种方式定义我的函数时代码有效：

function Cell(props: any, { location, clicked, mine, flagged, neighbors }: CellState) {}

构造函数签名的正确方法是什么？

Answer 1

发生这种情况是因为您没有在 Cell 组件中定义 state 道具。

你可以只展开整个 cellState 符合 Cell 道具要求的对象，如下所示。

<Cell {...cellState} />

如何将自定义接口作为 props 传递到功能性 React 组件中

How to Pass A Custom Interface As Props Into A Functional React Component

reactjs

typescript

react-props

destructuring

react-functional-component