代码之家 › 专栏 › 技术社区 › tuimui

使用react+ts通过道具传递数据

syntax-error typescript reactjs

tuimui · 技术社区 · 1 年前

我试着从这里开始做快速入门教程: https://react.dev/learn/tutorial-tic-tac-toe 在ts而不是js中。怎么了?上面写着: 声明了“number”,但从未读取其值。ts(6133) 绑定元素“number”隐式具有“any”类型。ts(7031)

export default function Board(){
  return (
    <>
      <div className="board-row">
        <Square value={1}/>
        <Square value={2}/>
        <Square value={3}/> 
      </div>
      <div className="board-row">
        <Square value={4}/>
        <Square value={5}/>
        <Square value={6}/>
      </div>
      <div className="board-row">
        <Square value={7}/>
        <Square value={8}/>
        <Square value={9}/>
      </div>
    </>
  );
}

function Square({value: number}){
  return <button className="square">{value}</button>;
}

上面写着: 声明了“number”,但从未读取其值。ts(6133) 绑定元素“number”隐式具有“any”类型。ts(703

1 回复 | 直到 1 年前

zouabi 1 年前

在您的示例中,您使用 destructuring 。

function Square({value: number}) {
  // ...
}
// is equivalent to:
function Square({ value: number }: any) {
  // ...
}
// or
function Square(props: any) {
  const number = props.value;

  // ...
}


// what you want is providing the type for the props:
function Square({ value }: { value: number }) {
 // ...
}

// or
interface SquareProps {
  value: number;
}

function Square({ value }: SquareProps) {
 // ...
}

// which is equivalent to:
function Square(props: SquareProps) {
 const value = props.value;
 // ...
}

祝你的学习之旅好运!

推荐文章

let_dev · 我很难弄清楚为什么会出现SyntaxError:node.js中意外的标记“{”

2 年前

Gourab Mahapatra · 当我定义和描述对象卡车的方法时,为什么我的程序不工作。驱动器()

3 年前

CrimsonOcean75 · 奇怪的python语法错误

3 年前

Evan Ringler · 试图在openpyxl中保存工作簿时出现语法错误

3 年前

Yellowspring · 这个Python代码中的错误是什么

3 年前

Prosto_Oleg · 带有NOT EXIST语句的IF语句中出现Postgres语法错误

3 年前

DashCode17 · 在excel 2017中嵌套6个IF语句并获取#名称?错误

6 年前

coldhands · 将oracle的Listag转换为postgres

6 年前

Alex Virdee · 将ember应用程序升级到3.0意外令牌<<

6 年前

matthewr · Python 3,否则会导致语法错误

6 年前