0
点赞
收藏
分享

微信扫一扫

React 入门实例 学习笔记 二、 按钮点击计数器 Button Click Counter

水沐由之 2022-03-16 阅读 75

1 添加组件

src文件夹下,新建components文件夹
文件夹中添加以下三个文件

Button.tsx 如下

import React from 'react';
import './Button.css'

export const Button = props => {
  return (
    <button className='Button' onClick={props.onClick}>
      {props.children}
    </button>
  )

Button.css如下

import React from 'react';
import './Button.css'

export const Button = props => {
  return (
    <button className='Button' onClick={props.onClick}>
      {props.children}
    </button>
  )

Counter.tsx如下

import React from 'react';
import {Button} from './Button.tsx';


export const Counter = props => {
  const [clicks, setClicks] = React.useState(0);
  const handleClick = () => setClicks(clicks + 1);
  const { text } = props;

  return (
    <div>
      {text}: {clicks}
      <Button onClick={handleClick}>Click</Button>
    </div>
  );
}

2 添加App

src文件夹下,添加App.tsx文件如下

import React from 'react';
import { Counter } from './components/Counter.tsx';

export const App = props => {
  return (
    <div>
      <Counter text="chickens" />
      <Counter text="ducks" />
    </div>
  )
}

3 简单修改index

修改public/index.html的标题为Button Click Counter,修改后如下

<!DOCTYPE html>
<html>
  <head>
    <title>Button Click Counter</title>
  </head>

  <body>
    <div id="app"></div>
  </body>
</html>

src/index.js重命名为src/index.tsx,且修改内容如下

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App.tsx';


ReactDOM.render(
  <App />,
  document.getElementById('app')
);

4 运行及其他

在终端中输入npm start命令,运行项目
效果如下

请添加图片描述

点击按钮,对应的数字会加1

如果vscode中, 程序正确运行但是 import 语句后的.tsx有报错提示,可以关闭报错提示。
关闭方法如下

请添加图片描述

举报

相关推荐

0 条评论