Как добавить логическую инструкцию if при рендеринге компонентов React?

Ответ 1

Если вы хотите сделать это inline, вы можете сделать:

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

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

Если значение, которое вы хотите проверить, является ложным, но приведет к тому, что в результате React, как пустая строка, вы можете преобразовать его в свой логический эквивалент в проверке с помощью !!:

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

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

Ответ 2

Сохранение этой логической строки, а также использования JSX может помочь с удобочитаемостью

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;

Ответ 3

Хорошо, так что это может быть понятным для многих людей, по какой-то причине я этого не видел, затем снова быстро просматриваю документы, и я не использую JSX (на самом деле это не нравится)

Таким образом, способ добавления логических, если проверки, когда рендеринг реагирует на компоненты, будет выполнен следующим образом. (имейте в виду, что undefined работает просто отлично, поэтому, если предположить, что оператор if не попал, он все равно будет выглядеть просто отлично)

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
          )
        )
    );
  }
});

Ответ 4

Вы можете использовать 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>
        );
    }
});

Ответ 5

Использование JSX + IIFE (функция Immediately-Invoked) может быть довольно удобной и явной:

{(() => {
  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})}/>
  }
})()}