Хранить несколько HTML-элементов в переменной с React

Question

У меня есть некоторый повторяющийся код, который отображает HTML в компоненте React.Я хотел бы сохранить повторяющиеся элементы html в переменной и вернуть их, но не могу этого сделать.

const renderAddress = event => {
  if (event.venue.address.address_2) {
    return (
      <address>
        {event.venue.address.address_2}
        <br />
        {event.venue.address.address_1}
        <br />
        {event.venue.address.city}
        <br />
        {event.venue.address.postal_code}
      </address>
    )
  } else {
    return (
      <address>
        {event.venue.address.address_1}
        <br />
        {event.venue.address.city}
        <br />
        {event.venue.address.postal_code}
      </address>
    )
  }
}

В идеале я бы хотел что-то вроде этого:

const renderAddress = event => {
  const base = (
        {event.venue.address.address_1}
        <br />
        {event.venue.address.city}
        <br />
        {event.venue.address.postal_code}
        )
  if (event.venue.address.address_2) {
    return (
      <address>
        {event.venue.address.address_2}
        <br />
        {base}
      </address>
    )
  } else {
    return (
      <address>
        {base}
      </address>
    )
  }
}

Answer 1

Мне нравится JSX и способы, которыми вы можете манипулировать им, поэтому подумал, что я тоже опубликую ответ.

Используйте комбинацию массива, которой легко манипулировать, и нативный JSX-рендерингПримерно так ...

const renderAddress = event => {
  var address_pieces = [];

  if (event.venue.address.address_2) {
    address_pieces.push(event.venue.address.address_2);
  }

  address_pieces.push(event.venue.address.address_1);
  address_pieces.push(event.venue.address.city);
  address_pieces.push(event.venue.address.postal_code);

  return (
    <address>
      {address_pieces.map(address_piece => {
        return (
          <span>
            {address_piece}
            <br />
          </span>
        );
      })}
    </address>
  );
};

Это удаляет лишние части вашего кода и дает вам несколько новых инструментов JS для работы, например, map().

, которые я также кодировалполный рабочий образец здесь: https://codesandbox.io/s/r1w60ozo3o

Answer 2

Ваш идеальный подход кажется отличным способом составления окончательного элемента <address>.Вы можете добиться этого, используя Фрагменты , так как проблема / ошибка будет около base, содержимое в renderAddress(event) должно быть заключено в какой-то элемент, чтобы избежать ошибок при попытке рендеринга значений, таких как {event.venue.address.address_1},React.Fragment позволит вам визуализировать base, избегая при этом введения дополнительных визуализированных элементов оболочки:

const renderAddress = event => {
  const base = (
    <React.Fragment>
      {event.venue.address.address_1}
      < br />
      {event.venue.address.city}
      < br />
      {event.venue.address.postal_code}
    </React.Fragment>
  );

  if (event.venue.address.address_2) {
    return (
      <address>
        {event.venue.address.address_2}
        <br />
        {base}
      </address>
    );
  } else {
    return (
      <address>
        {base}
      </address>
    );
  }
};

Вот базовый пример в действии.

Примечание: React.Fragment доступно только с React версии 16.2 +.

Надеюсь, это поможет!