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

【问题标题】：Store multiple html elements in variable with React使用 React 将多个 html 元素存储在变量中
【发布时间】：2019-03-01 06:50:52
【问题描述】：

我有一些重复的代码在 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>
    )
  }
}

【问题讨论】：

标签： html reactjs jsx

【解决方案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+ 版本。

【讨论】：

【解决方案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

【讨论】：