React 中的類名

Question

我有一個如下所示的反應代碼，其中我想在A 線不呈現任何內容時有條件地在 React 中的Z 線添加一個類名

當Line A不呈現任何內容時，我想添加className hide (at Line Z) (hide { display: none })以便它可以隱藏整個abc-def div 。 我從他們的官方網站上找到了一個解決方案，但我無法將它集成到我上面的代碼中。

https://reactjs.org/docs/faq-styling.html#how-do-i-add-css-classes-to-components

Answer 1

根據需要使用帶有條件的內聯樣式。

Answer 2

不要在內聯調用這些函數，而是考慮在render() function 之前調用它們，這樣你就可以檢查內容；

const renderPrograms = () => {
    return programs.map((program, index)=>{
        return (
            <a href={program.url} key={index}>
                <div className="program" >
                    <div class="hello-world">{program.name}</div>
                </div >
            </a>
        )
    })
}

const lineA = programs && renderPrograms();
const lineBClassName = (!lineA) ? ' hide' : '';

return(
    <div class="parent-div">
        <div className ="pqr-xyz">  
            <h5>Hello World</h5>            
        </div>
        <div className={"abc-def" + lineBClassName}>        
            <h5>Programs</h5>
            {lineA}
        </div>
    </div> 
)

Answer 3

由於programs是一個數組，所以可以先檢查一下

這是一個條件渲染解決方案

return(
 <div class="parent-div">
  <div className ="pqr-xyz">  
     <h5>Hello World</h5>            
  </div>
  {programs.length && 
  <div className="abc-def hello-world">
     <h5>Programs</h5>
    {renderPrograms()}
   </div>}
 </div> 
 )

有條件的class解決方案

return(
 <div class="parent-div">
  <div className ="pqr-xyz">  
     <h5>Hello World</h5>            
  </div>
  // if the length is 0 or the array is empty then add hide class
  <div className={`abc-def ${!programs.length && "hide"}`}>
     <h5>Programs</h5>
    {programs.length && renderPrograms()}
   </div>
 </div> 
 )

無論如何，您也可以檢查類名庫，這是在反應中添加條件 class 更有效的方法