使用react将多个HTML元素存储在变量中

你的理想方法似乎是一个很好的方式来组成决赛 <address> 元素。你可以用 Fragments 因为问题/错误会出现 base 中的内容 renderAddress(event) 需要用某些元素包装,以避免尝试呈现值时出错,例如 {event.venue.address.address_1} . 一 React.Fragment 会允许你渲染 基础 在避免引入其他呈现包装元素的同时:

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>
    );
  }
};

这里有一个基本 example 在行动中。

注: 反应碎片 仅适用于React版本16.2+。

希望有帮助!

我喜欢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