526互联

React中状态提升

发布时间 2023-11-05 16:32:14作者: Felix_Openmind

代码案例

function A({ onGetAName }) {
    const name = `> ${new Date().getTime()} <`;
    return (
        <div>
            This is A component !
            {/*箭头函数形式来调用事件函数*/}
            <button onClick={() => onGetAName(name)}>sendAName</button>
        </div>
    )
}

function B({name}) {
    return (
        <>
            Transfer Data from A: {name}
            This is B component !
        </>
    )
}


// 1. 通过子传父 A -> App
// 2. 通过父传子 App -> B

function App() {
    const [name, setName] = useState('');
    const getAName = (name) => {
        console.log('【print】name: ', name)
        setName(name)
    }

    return (<>
        This is App
        <A onGetAName = {getAName}/>
        <B name={name}/>
    </>)
}

export default App;