Jak dodać instrukcję logiczną, jeśli podczas renderowania React components?

Question

jeśli mam kodu, który wygląda tak ...

var Lounge = React.createClass({displayName: "Lounge", 
    render: function() { 
    return (
      React.createElement("a", {href:"/lounge/detail/" + this.props.id + "/"}, 
      React.createElement("div", {className: "lounge"}, 
      React.createElement("h2", {className: "loungeAuthor"}, 
       this.props.author.name 
      ), 
      React.createElement("p", {className: "loungeArticle"}, 
       this.props.article 
      ), 
      React.createElement("img", {className: "loungeImage", src: this.props.image}) 
     ) 
     ) 
    ); 
    } 
}); 

muszę zrobić logiczna Jeśli zaznaczysz tylko wykonywali „img” komponent jeśli dane obrazu istnieje. Czy ktokolwiek zna najlepszy sposób na to, używając React?

Answer 1

Jeśli chcesz to zrobić inline, można zrobić:

{this.props.image && <img className="loungeImage" src={this.props.image}/>} 

this.props.image && React.createElement("img", {className: "loungeImage", src: this.props.image}) 

Jeśli wartość chcesz sprawdzić to falsy ale spowodowałoby coś są renderowane przez React, jak pusty ciąg, może chcesz przekonwertować go do logicznego odpowiednika w czeku za pomocą !!:

{!!this.props.image && <img className="loungeImage" src={this.props.image}/>} 

!!this.props.image && React.createElement("img", {className: "loungeImage", src: this.props.image}) 

Answer 2

Dobrze, może to być jasne dla wielu osób, z jakiegoś powodu nie widziałem go, a następnie ponownie szybko przeglądam dokumenty i nie używam JSX (naprawdę nie lubię tego)

W związku z tym sposób JavaScript dodawania logicznego, jeśli kontrole podczas renderowania reagują z komponentami, byłyby wykonywane w ten sposób. (Należy pamiętać prac niezdefiniowanych dobrze, więc przy założeniu, że jeśli oświadczenie nie jest trafiony to nadal czyni dobrze)

var Lounge = React.createClass({displayName: "Lounge", 
    render: function() { 
    if (this.props.image != "") { 
     var imageElement = React.createElement("img", {className: "loungeImage", src: this.props.image}); 
    } 
    return (
      React.createElement("a", {href:"/lounge/detail/" + this.props.id + "/"}, 
      React.createElement("div", {className: "lounge"}, 
      React.createElement("h2", {className: "loungeAuthor"}, 
       this.props.author.name 
      ), 
      React.createElement("p", {className: "loungeArticle"}, 
       this.props.article 
      ), 
      imageElement 
     ) 
     ) 
    ); 
    } 
}); 

Answer 3

Utrzymanie tej logiki inline jak również przy użyciu JSX może pomóc czytelności

import React from 'react'; 
import PropTypes from 'prop-types'; 
import s from './Lounge.css'; // See CSS Modules 

// Stateless functional component (since there is no state) 
function Lounge({ id, article, author, imageUrl }) { 
    return (
    <a href={`/lounge/detail/${id}/`}> 
     <span className={s.lounge}> 
     <span className={s.author}>{author.name}</span> 
     <span className={s.article}>{article}</span> 
     {imageUrl && <img className={s.image} src={imageUrl} />} // <== 
     </span> 
    </a> 
); 
} 

// Props validation 
Lounge.propTypes = { 
    id: PropTypes.number.isRequired, 
    article: PropTypes.string.isRequired, 
    imageUrl: PropTypes.string, 
    author: PropTypes.shape({ 
    name: PropTypes.string.isRequired 
    }).isRequired 
}; 

export default Lounge; 

Answer 4

Można użyć React if component:

var Node = require('react-if-comp'); 

var Lounge = React.createClass({ 
    displayName: 'Lounge', 
    render: function() { 
     return (
      <a href={'/lounge/detail/' + this.props.id + '/'}> 
       <div className='lounge'> 
        <h2 className='loungeAuthor'>{author.name}</h2> 
        <p className='loungeArticle'>{article}</p> 
        <Node if={this.props.image} 
         then={<img className='loungeImage' 
         src={this.props.image} />} /> 
       </div> 
      </a> 
     ); 
    } 
}); 

Answer 5

Korzystanie JSX + Iife (funkcja Natychmiast-Wywołuje) może przyjść bardzo przydatny i wyraźne:

{(() => { 
    if (isEmpty(routine.queries)) { 
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/> 
    } else if (this.state.configured) { 
    return <DeviceList devices={devices} routine={routine} configure={() => this.setState({configured: false})}/> 
    } else { 
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/> 
    } 
})()}