JSX - как объединить код из 2 переменных?

Question

Допустим, у меня есть эти 2 переменные:

const test1 = (<div> ..... </div>);
const test2 = (<div> ..... </div>);

Как объединить их вместе (имеется в виду код test1, за которым следует код test2) в "действительную" переменнуюназывается test3, а затем визуализировать его следующим образом:

{this.array.length !== 0 ? test3 : null}

?

Answer 1

Вы можете использовать React Fragment в комбинации синтаксиса короткого замыкания, чтобы сделать его коротким и приятным.

render() {
  const test3 = <React.Fragment>{test1}{test2}</React.Fragment>;
  return (this.array.length && test3);
}

Answer 2

Вы можете сделать его еще короче, если используете последние версии React.Не нужно вводить React.Fragment;) Сокращенное обозначение <> и

const test3 = {this.array.length !== 0 ? <>{test1}{test2}</> : null }

Answer 3

Если вы используете React 16.2+, используйте Фрагмент :

{this.array.length !== 0 ? <React.Fragment>{test1}{test2}</React.Fragment> : null}