RubyZip: невозможно найти путь к файлу, хранящемуся в Active Storage

Как насчет этого. Давайте определим простой компонент If.

var If = React.createClass({
    render: function() {
        if (this.props.test) {
            return this.props.children;
        }
        else {
            return false;
        }
    }
});

И используйте его следующим образом:

render: function () {
    return (
        

            
                
{this.state.banner}
            
            

                blah blah blah...
            
        
    );
}

ОБНОВЛЕНИЕ: по мере того как мой ответ становится популярным, я обязан предупредить вас о самой большой опасности, связанной с этим решением. Как указано в другом ответе, код внутри компонента выполняется всегда независимо от того, является ли условие истинным или ложным. Поэтому следующий пример потерпит неудачу, если banner - null (обратите внимание на доступ к свойствам во второй строке):

    
{this.state.banner.url}

Вы должны быть осторожны, когда вы используете его. Я предлагаю прочитать другие ответы для альтернативных (более безопасных) подходов.

ОБНОВЛЕНИЕ 2: Оглядываясь назад, этот подход не только опасен, но и отчаянно громоздкий. Это типичный пример того, когда разработчик (я) пытается передать шаблоны и подходы, которые он знает из одной области в другую, но на самом деле это не работает (в этом случае другие языки шаблонов).

Если вам нужно условный элемент, сделайте это так:

render: function () {
    return (
        

            {this.state.banner &&
                
{this.state.banner}
}
            

                blah blah blah...
            
        
    );
}

Если вам также нужна ветка else, просто используйте тернарный оператор:

{this.state.banner ?
   
{this.state.banner}
 :
   
There is no banner!
}

Это путь короче, более элегантный и безопасно. Я использую это все время. Единственным недостатком является то, что вы не можете легко разветвлять else if, но это обычно не так часто.

В любом случае это возможно благодаря тому, как работают логические операторы в JavaScript. Логические операторы даже допускают такие небольшие трюки:

{this.state.banner.title || 'Default banner title'}