javascript - 在 React 中通过两个组件内部的按钮切换两个组件的可见性

Question

我有这个结构

组件 1

import React, { useState } from 'react'

export default function Component1() {
    return (
        <div>
            <button onClick={handleChange}></button>
        </div>
    )
}

组件 2

import React, { useState } from 'react'

export default function Component2() {
    return (
        <div>
            <button onClick={handleChange}></button>
        </div>
    )
}

和家长

import React from 'react'

export default function Parent() {
    return (
        <div>
            <Component1 />
            <Component2 />
        </div>
    )
}

问题是，如何在父级中没有按钮的情况下在两者之间切换可见性。只是每个组件内的按钮。 - 默认情况下，Component1 应该可见，当您按下 Component1 中的按钮时，它将隐藏它并显示 Component2，反之亦然。

我尝试在 Component1 按钮上使用 useState Hook ，但我不确定如何导出状态并将其添加到父组件。

    const [showMini, setShowMini] = useState(false);

    const handleChange = () => {
      setShowMini(true);
    }

这可能吗？或者可以只用父级中的一个按钮来控制这两个按钮？ 谢谢

Answer 1

试试这个:

import React from 'react'

export default function Parent() {
    const[show,setShow]=useState(false);
    const handleChange=()=>{
        setShow(!show);
    }
    return (
        <div>
            {show ? <Component2 handleChange={handleChange}/> : <Component1 handleChange={handleChange}/>}
        </div>
    )
}

Component1 内部有这个:

import React, { useState } from 'react'

export default function Component1({handleChange}) {
    return (
        <div>
            <button onClick={handleChange}></button>
        </div>
    )
}

对组件2进行类似的操作