使用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}。A 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+版本。

希望有帮助！