react初使用

在运行窗口中输出npm init react-app 项目名 如果是需要ts就要写成npm init react-app my-app --typescript

箭头标注的没有用需要删掉，index.tsx改造成下图所示


还需要装sass和sass解析器

父组件中

import React from 'react'
import { useState, useEffect } from 'react'
//引入定义数据，必须通过结构赋值的方式来定义
import Child from './components/child'
//引入子组件
import { Form, Input, Button, Checkbox, Table } from 'antd';
//引入antd中的组件
//表格数据
const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
];
const check = (record: any) => {
  console.log(record);

}
//表格表头
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
    render: (text: string) => {
      return (
        <span style={{ color: 'red' }}>{text}</span>
      )
    }
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    render: (text: string, record: any) => {
      return (
        <>
          {/* 传参数要写成箭头函数的形式 */}
          <Button type='primary' onClick={() => { check(record) }}>查看</Button>
          <Button danger>编辑</Button>
        </>
      )
    }
  },
];
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const App = () => {
  let [num, setNum] = useState<number>(0)  //是一个数组，第一项代表数据，第二项为改变数据的方法
  let [arr, setArr] = useState<string[]>(['a', 'b', 'c', 'd'])
  let updateNum = () => {
    setNum(100)
  }
  useEffect(() => {
    //初始化工作
    return () => {
      //组件卸载的代码
    }
  })
  let send = (msg: string) => { //传给子组件的方法
    console.log(msg);
  }
  const onFinish = (values: any) => { //提交成功方法
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => { //提交失败方法
    console.log('Failed:', errorInfo);
  };
  return (
    <div>
      <Button type='primary'>按钮</Button>
      <div>{num}</div>
      {/* 子组件，带有插槽num为传给子组件的数据，send为传给子组件的方法 */}
      <Child num={num} send={send}>插槽内容</Child> 
      {/* 显示定义的变量需要一个大括号包裹 */}
      <div><button onClick={updateNum}>改变数据</button>
        {/* 点击事件要写成on然后加事件事件名字要用大括号包裹（变量的形式） */}
      </div>
      <div>
        {/* 写js代码需要用大括号包起来 */}
        {
          arr.map((item: string, index: number) => {
            return (
              <div key={index}>{item}---{index}</div>
            )
          })
        }
      </div>
      <div>
        {/* 写js代码需要用大括号包起来 */}
        {
          num > 10 ? <div>111</div> : <div>222</div>
        }
      </div>
      <Form
        {...layout}
        name="basic"
        initialValues={{ username: 'abc', password: '123456' }} //初始值，最外层大括号代表js代码，内层大括号代表对象
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item {...tailLayout} name="remember" valuePropName="checked">
          <Checkbox>Remember me</Checkbox>
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
            Submit
        </Button>
        </Form.Item>
      </Form>
      <Table dataSource={dataSource} columns={columns} ></Table>;
    </div>
  )
}
export default App

子组件中

import React, { useState, useRef, useEffect, FC } from 'react'
interface Props {
    num: number,
    send: (msg: string) => void
}
const Child = (props: any) => {
    let [msg] = useState<string>('子组件值')
    let send = () => {
        props.send(msg)
    }
    let dvRef = useRef<HTMLDivElement | null>(null) //拿到dom元素
    useEffect(() => { //传两个参数，第二个为变化的变量，传入一个空数组只会操作一次
        console.log(dvRef.current);

    }, [])
    return (
        <div>
            <div>父组件传过来的值：{props.num}</div>
            <div><button onClick={send}>传给父组件</button></div>
            <div ref={dvRef}>123</div>
            <div style={{ color: 'blue' }}>
                {props.children}
            </div>
        </div>
    )
}
export default Child