时间戳

首页 > 解决方案 > 在 React 中从它们内部的按钮切换两个组件的可见性

javascript - 在 React 中从它们内部的按钮切换两个组件的可见性

问题描述

我有这个结构

组件 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 挂钩，但我不确定如何导出状态并将其添加到父组件。

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

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

这可能吗？还是可以只在父级中使用一个按钮来控制两者？谢谢

标签： javascriptreactjs

解决方案

试试这个：

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>
    )
}

同样对 Component2 执行此操作

推荐阅读