ReactJS JSX Синтаксис для If-Else

Question

У меня есть следующий код jsx, я пытаюсь вывести некоторый код из функции сопоставления, но получая ошибки с синтаксисом jsx, я хочу, чтобы этот блок отображался только в том случае, если есть некоторые данные. .

{this.props.someData ? 
    <div className="container"> 
    <h3>Heading</h3> 
    <div className="block1"> 
     <button>one</button> 
     <buttontwo</button> 
    </div> 
    this.props.someData.map((response, index) => { 
     return ( 
     <div className="Block2"> 
      <div key={index}> 
      <span>{response.number}</span> 
      </div> 
     </div> 
     </div> 
    ); 
}) : ''} 

Answer 1

Написать это так:

{this.props.someData ? 
    <div className="container"> 
      <h3>Heading</h3> 
      <div className="block1"> 
       <button>one</button> 
       <buttontwo</button> 
      </div> 
      {this.props.someData.map((response, index) => { 
       return ( 
       <div className="Block2"> 
        <div key={index}> 
        <span>{response.number}</span> 
        </div> 
       </div> 
      )}) 
      } 
    </div> 
: <div/>} 

Ошибка вы делаете:

Оказывать любой JS код внутри HTML элементов, {} требуется, так как вы рендеринга JSX если условие истинно и внутри, используя map поэтому положил map функция внутри {}, он будет работать.

Answer 2

Вы должны быть в состоянии добавить ребенка { оборачивать вашу карту. У вас есть еще несколько ошибок. Вы слишком рано использовали теги и фигурные скобки. Кроме того, «пустой» элемент JSX должен возвращать нулевую, а не пустую строку. Вы также нарушили синтаксис с не закрывая > здесь: <buttontwo</button>

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

{this.props.someData ? 
    <div className="container"> 
     <h3>Heading</h3> 
     <div className="block1"> 
      <button>one</button> 
      <button>two</button> 
     </div> 
     { this.props.someData.map((response, index) => { 
      return (
       <div className="Block2"> 
        <div key={index}> 
         <span>{response.number}</span> 
        </div> 
       </div> 
      ); 
     }) } 
    </div> : null} 

Answer 3

Если я получить значение правильно, я думаю, что это будет делать:

{this.props.someData && 
    (<div className="container"> 
    <h3>Heading</h3> 
    <div className="block1"> 
     <button>one</button> 
     <buttontwo</button> 
    </div> 
    {this.props.someData.map((response, index) => { 
     return ( 
     <div className="Block2"> 
      <div key={index}> 
      <span>{response.number}</span> 
      </div> 
     </div> 
    ); 
    })} 
    </div>) 
} 

Я рекомендую вам взглянуть на раздел условного рендеринга в documentation.