如何在樣式化組件上進行條件渲染？-有解無憂

我正在使用條件渲染來制作切換功能。但我認為該方法存在問題，因為我對樣式化組件進行了條件渲染，但它不起作用。你能告訴我如何解決嗎？如果你讓我知道，我將不勝感激謝謝

我的.jsx：

如果我單擊另一個影像，則的值profile變為 false，如果單擊profile影像，則的值profile變為 true。并且根據profile的值，我通過條件渲染className為的標簽給出了display的值IconWrap6True。但是現在，IconWrap6Trued 的顯示值一直以塊的形式出現，并且沒有應用“無”。繩子很長，所以我跳過了我不需要的部分

import React, { useState } from 'react'
import styled from 'styled-components';
import defaultProfile from '../resources/images/img/defaultprofile.jpg'


const NavigationBarWrap1 = styled.div`
  position: fixed;
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  align-items: stretch;



  .IconWrap6True {
    ${props => props.profile ? "block" : "none"};
    box-sizing: border-box;
    border-bottom-left-radius: 50%;
    top: 50%;
    border-top-right-radius: 50%;
    left: 50%;
    border: 2px solid rgb(38,38,38);
    transform: translate(-50%,-50%);
  }



`

function NavigationBar() {

  //state 
  const[home, setHome] = useState(true);
  const[profile,setProfile] = useState(true); 

  //true
  const setTrueHome = () => {
    setHome(true)
  }

  const setTrueProfile = () => {
    setProfile(true)
  }

  //false
  const setFalseHome = () => {
    setHome(false)
  }


  const setFalseProfile = () => {
    setProfile(false)
  }
  
    //handle
   const forHome = (e) => {
    setTrueHome();
    setFalseProfile();
   }

   const forProfile = (e) => {
    setFalseHome();
    setTrueProfile();
   }

  return (
    <NavigationBarWrap1>
              <div className='IconWrap'>
                    <div className='IconWrap4'>
                      <div onClick={forHome} className='IconWrap5'>
                        <div>
                          <div className='IconWrap6'>
                            <div className='IconWrap7'>
                              {home===true?
                              <>
                                <img/>
                              </>:
                              <>
                                <img/>
                              </>}
                              
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
              </div>
              <div className='IconWrap'>
                <div className='IconWrap2'>
                  <div>
                    <div className='IconWrap6'>
                      <div profile={profile} className='IconWrap6True'/>
                      <div onclick={forProfile} className='IconWrap7'>
                        <img src={defaultProfile}/>
                      </div>
                    </div>
                  </div>
                  <div className='textWrap'>
                    <div className='textWrap2'>
                      <div className='textWrap3'>
                        ???
                      </div>
                    </div>
                  </div>
                </div>
              </div>
    </NavigationBarWrap1>
  )
}

export default NavigationBar;

uj5u.com熱心網友回復：

將 profile 屬性傳遞給NavigationBarWrap1

<NavigationBarWrap1 profile={profile}>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/524578.html

標籤：反应

上一篇：在react-query中的onMutate更新后執行DOM操作

下一篇：如何在導航欄中使籃子圖示回應移動設備？