wenn Bedingung in reactjs

Question

Wenn Bedingung in reactjs nicht funktioniert. möchte ein Karussell erstellen, so dass sein erstes Bild die Klasse "aktiv" enthält, wo andere nicht.

Zustand ist der Index Null ist oder nicht

wie anzuwenden, wenn in Zustand

class CaseImages extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    } 
 

 
    _getImages() { 
 
    return this.props.images.map((image, index) => 
 
           if ({index}==0}<div className="item active" key={index}><img src={image.url} class="case-image"/ ></div>} 
 
           else{ 
 
           <div className="item" key={index}><img src={image.url} class="case-image"/ ></div> 
 
           } 
 
           ); 
 
} 
 
\t render(){ 
 
\t \t return(
 
\t \t <div className="row"> 
 
\t \t \t <div className="col-xs-12 col-sm-12"> 
 
\t \t \t \t <div className="case-feature-image"> 
 
\t \t \t \t \t <div id="myCarousel" className="carousel slide" data-ride="carousel"> 
 
         <div className="carousel-inner" role="listbox"> 
 
           {this._getImages()} 
 
         </div > 
 
     <a className ="left carousel-control" href ="#myCarousel" role ="data-slide = "prev"> 
 
     <span className = "glyphicon glyphicon-chevron-left" 
 
     aria - hidden = "true"> </span> 
 
          <span className="sr-only">Previous</span> 
 
     </a> 
 
         <a className="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
          <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span className ="sr-only"> Next </span> 
 
         </a> 
 
     </div> 
 
\t \t \t \t </div> 
 
     </div> 
 
\t \t </div> 
 
    ) 
 
    }; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

Versuchen Sie etwas Ähnliches wie die folgenden reagieren:

<div className={index === 0 ? 'item active' : 'item'}>...</div> 

Sie könnten auch Verwenden Sie eine Funktion, um die korrekten Klassen zu berechnen:

// this function needs to live *outside* of JSX 
function getClasses(index) { 
    return 'item' + index === 0 ? ' active' : ''; 
} 

// this is in the JSX 
<div className={getClasses(index)}>...</div> 

Answer 2

können Sie entweder einen bedingten Operator wie folgt:

{index===0? 
    <div className="item active" key={index}><img src={image.url} class="case-image"/ ></div> 
: 
    <div className="item" key={index}><img src={image.url} class="case-image"/ ></div> 
} 

oder eine Funktion wie folgt aus:

{(()=> {  
     if(index===0){ 
      return(<div className="item active" key={index}><img src={image.url} class="case-image"/ ></div>);} 
     else{ 
      return(<div className="item" key={index}><img src={image.url} class="case-image"/ ></div>);}    
     })()} 

Answer 3

ich eine weitere Alternative in den Hut werfen werde, mit classnames:

const divClass = classNames('item', { active: index === 0 }) 
... 
<div className={divClass} key={index}> 
    <img src={image.url} className="case-image" /> 
</div> 

Ich bevorzuge das Einrechnen von Berechnungen ons außerhalb von Tags und Deduplizierung so viel wie möglich.