html - 使用 React 将多个 html 元素存储在变量中

Question

我有一些重复的代码在 React 组件中呈现一些 html。我想将重复的 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

您的理想方法似乎是构成最终 <address> 的好方法元素。您可以使用 Fragments 实现此目的因为问题/错误将在 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>
    );
  }
};

这是一个基本的 example在行动中。

注意: React.Fragment仅适用于 React 版本 16.2+。