react基础操作

组件之间进行参数传递

首先我们创建一个组件，在我们的主程序中把数据传递过去

import {useState} from 'react'
import SOME from './g6/ant-d-g6'
import './App.css'

function App() {
    const [data, setData] = useState<String>('传递参数')
    return (
        <>
            <div>
                <SOME data={data}></SOME>
            </div>
        </>
    )
}

export default App

另外一个组件进行接收

import React from 'react';
import {Button, Space} from 'antd';

interface Props {
    data?: String
}

const Dome: React.FC = ({data}: Props) => (
    <Space wrap>
        <Button type="primary">{data}</Button>
    </Space>
);

export default Dome;

 在组件中进行参数的修改操作

import {useState} from 'react'
import SOME from './g6/ant-d-g6'
import './App.css'

function App() {
    const [data, setData] = useState<String>('传递参数')
    return (
        <>
            <div>
                <SOME setData={setData} data={data}></SOME>
            </div>
        </>
    )
}

export default App

进行事件创建和修改操作

import React from 'react';
import {Button, Space} from 'antd';

interface Props {
    data?: String
    setData?: any
}

const Dome: React.FC = ({data, setData}: Props) => {
    const dataFn = () => {
        setData('测试')
    }
    return (
        <Space wrap>
            <Button onClick={dataFn} type="primary">{data}</Button>
        </Space>
    );
}

export default Dome;