Как лучше всего разместить 2 встроенных в React 15?

Я хотел знать, можно ли сделать вложенные 2 if в reactjs jsx? Я пробовал разные способы, но не могу заставить их работать. Я пробовал с одним элементом, который работает. Как только я вставляю и добавляю элементы, мой код ломается.

              <div>
                {
                  (() => {
                    if (VerticalRole === "Software Developer")

                    <div>
                      <label>GITHUB ACCOUNT</label>
                      <div className = "value">
                        <input
                          type = "text"
                          name = "github_url"
                          className = "lowercase"
                          defaultValue = {this.props.talent.github_url}
                          onChange = {this.onChangeInput.bind(this)}
                        />
                      </div>
                    </div>

                    if (MarketVetical === "Creative/Marketing")

                    <div>
                      <label>Portfolio Website</label>
                      <div className = "value">
                        <input
                          type = "text"
                          name = "github_url"
                          className = "lowercase"
                          defaultValue= 
                          {this.props.talent.personal_website}
                          onChange = {this.onChangeInput.bind(this)}
                        />
                      </div>
                    </div>
                  })()
                }
              </div>

responsejs.org/docs/conditional-rendering.html

— 31.05.2018 04:58

javascript reactjs react-router

31.05.2018 04:55

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете попробовать с тернарным оператором:

<div>
  {
    VerticalRole === "Software Developer" ?
      <div>
        <label>GITHUB ACCOUNT</label>
        <div className = "value">
          <input
            type = "text"
            name = "github_url"
            className = "lowercase"
            defaultValue = {this.props.talent.github_url}
            onChange = {this.onChangeInput.bind(this)}
            />
          </div>
      </div>
    : MarketVetical === "Creative/Marketing" ?
      <div>
        <label>Portfolio Website</label>
        <div className = "value">
          <input
            type = "text"
            name = "github_url"
            className = "lowercase"
            defaultValue= 
            {this.props.talent.personal_website}
            onChange = {this.onChangeInput.bind(this)}
          />
        </div>
      </div>
    : null
  }
</div>

Это сработало, и я вижу, насколько полезен тернарный оператор

— 31.05.2018 05:54

31.05.2018 05:36