Как с помощью React создать условный рендер из трех частей? - PullRequest
Новая
       5

Как с помощью React создать условный рендер из трех частей?

0 голосов
/ 17 июня 2020

Я пытаюсь создать условный рендер и, похоже, что-то испортил. Возможно ли это?

location: `${props.off_campus_location ? ( `${props.off_campus_location}` ) : ( `${props.campus_location.name}` ) : ( `${props.location_type}` )}`,

Я получаю ошибку:

Неожиданный токен, ожидается "}" (15: 118)

Ответы [ 2 ]

0 голосов
/ 17 июня 2020

Как бы то ни было, я обычно просто перемещаю их во вспомогательный метод 

class SomeComponent extends React.Component {
   render() {
     const someProp = this.state.someProps

     const someComplexStatement = () => {
       if(someProp === 1) {
         return (<span>1</span>)
       } else if (someProp === 2) {
         return (<span>2</span>)
       }
     }
     return (
       <div>
         { someComplexStatement() }
       </div>
     )
   }
}

Вы можете переместить это в метод класса, какой-либо другой компонент, что имеет смысл. Тернарные операторы, на мой вкус, немного трудно читать, поэтому я стараюсь немного очистить их. Здесь нет "правильного" ответа, но если я иду дальше простого if/else, я стараюсь их избегать.

0 голосов
/ 17 июня 2020

Вы пытаетесь использовать тернарные операторы с недопустимым синтаксисом. Документы MDN содержат прекрасное объяснение того, как следует использовать эту конструкцию.

Вы можете использовать последовательность операторов || для отображения первого истинного значения в последовательности, например: 

location: `${props.off_campus_location ? ( `${props.off_campus_location}` ) : ( `${props.campus_location.name}` || `${props.location_type}` )}`

Хотя я думаю, что то, что вы пытаетесь выполнить, sh было бы намного чище, если бы вы просто использовали оператор if, но, конечно, это личное предпочтение.

...