Question

我有两个组成部分。父组件1有一个子组件2，我在组件1中有一个onClick函数，可以打开组件2。但是当我调用组件2时，组件1保持打开状态。我想在打开组件2时关闭组件1，并且组件2也具有backIcon，我想当我单击该图标时将我带回到组件1。当您想返回时，它与Google Chrome浏览器基本相同< / p>

Component 1
const MainSettings=()=> {
const [isSystemOpen, setIsSystemOpen]= React.useState(false)


    function openSystem(){
        setIsSystemOpen(true)
      }
      function closeSystem(){
        setIsSystemOpen(false)
      }
   

<ComputerIcon onClick={openSystem} />
                {isSystemOpen ? <System />: null}



Component 2

const System=(props)=> {


return(

        <div className='mainSystem'>
            <BackIcon />
        </div>

Answer 1

这称为react中的条件渲染。我认为这是一个简单的案例。

为您的解决方案提供示例代码。但是，如果它不能满足您的需求，请具体说明您的问题。

Component 1
const MainSettings=()=> {
const [isSystemOpen, toggleSystem]= React.useState(false)


    toggleSystemComponent = () =>{
      toggleSystem(!isSystemOpen)
    }
   

       <ComputerIcon onClick={()=>toggleSystemComponent} />
       {isSystemOpen ? <System />: null}



Component 2

const System=(props)=> {


return(

        <div className='mainSystem'>
            <BackIcon />
        </div>

反应道具和状态

1 个答案: