не может использовать if / else внутри метода render render

Question

Я использую React с Ant Design, но это всего лишь проблема с реакцией.

У меня есть такой код:

  {
    title: "Group",
    dataIndex: "group",
    key: "group",
    render: text => (
     <a> {text} </a>
    )
  }

Не render: text => (), который позволяет мне использовать html внутри функции js (или jsx?)

, но,если я пытаюсь поставить логику if / else, я всегда получаю ошибку.

Прямо сейчас я использую что-то глупое, как это:

render: texts => (
  <span>
     {[""].map(text => {
      if(texts.includes(":")) {
       return (<b> {texts} </b>)
      }
    return (<a> {texts} </a>)
  })}
</span>

Вопрос в том, есть ли способ сделать это без использования [""].map() и почему не будет просто, если / иначеработа

Answer 1

Вы не можете использовать if/else внутри JSX, но вы можете использовать троичное выражение внутри JSX или условие if/else внутри вашей функции перед возвратом некоторого JSX. Вот пример обоих:

    {

      render: texts => (
        <span>
          { 
            texts.includes(":")
              ? <b> {texts} </b>
              : <a> {texts} </a>
          }
        </span>
      ),

      otherRender: texts => {
        if (texts.includes(":")) {
          return (
            <span><b> {texts} </b></span>
          )
        }
        return (
          <span><a> {texts} </a></span>
        )
      }

    }

Answer 2

Почему это невозможно:

• существует разница между выражениями и операторами в JS:

  Выражение создает значение ... выражениевыполняет действие.

• синтаксис {} позволяет встраивать выражения в JSX , но НЕ допускает встраивание операторов
• if isоператор

Эквивалентное выражение, использующее условный оператор для замены if:

render: texts => (
  <span>
     {texts.includes(":")
       ? <b>{texts}</b>
       : <a>{texts}</a>
     }
  </span>
)