React 中的条件包装

这并不总是你所需要的，但我为那些寻找它的人写了这篇文章。

有时我们可能会有一个通用元素，即在模态框内渲染的特定组件。
当设置了特定标志时，该组件应该获取一个父包装器，以便以不同的变体显示它。

我们可以使用 if...else 语句，但它看起来很混乱。

React 中的条件包装

假设我们制作了特定的服务卡片，以便更容易理解。在某些情况下，卡片会解释某项服务，但在其他情况下，卡片需要链接到详情页面。

该组件可能看起来像这样。

const ServiceCard = ({ title, description, image, url }) => {
  return (
    <section>
      <h2>{title}</h2>
      <p>{description}</p>
      <img src={image} alt={title} />
    </section>
  );
};

如上所述，如果我们需要在 URL 存在的情况下将整个内容包装在 link 元素中，会发生什么？
我们可以使用 if...else 循环。

const ServiceCard = ({ title, description, image, url }) => {
  return (
    <section>
      {url ? (
        <a href={url}>
          <h2>{title}</h2>
          <p>{description}</p>
          <img src={image} alt={title} />
        </a>
      ) : (
        <>
          <h2>{title}</h2>
          <p>{description}</p>
          <img src={image} alt={title} />
        </>
      )}
    </section>
  );
};

但这会导致代码重复，有点傻。如果我们需要为每个元素添加样式，则必须在两个地方进行修改。

那么我们如何才能更好地有条件地包装它呢？

我们可以创建一个通用组件来为我们处理这个问题，该组件将被命名为ConditionalWrapper，它将采用条件、包装器和它应该包装的子项。

const ConditionalWrapper = ({ condition, wrapper, children }) =>
  condition ? wrapper(children) : children;

有了它，我们就可以在现有的组件上使用它来清理它。

const ServiceCard = ({title, description, image, url}) => {
    return (
        <section>
            <ConditionalWrapper
                condition={url}
                wrapper={children => <a href={url}>{children}</a>}
            >
                <>
                    <h2>{title}</h2>
                    <p>{description}</p>
                    <img src={image} alt={title} />
                </>
            </ConditionalWrapper>
        </section>
    )
}

现在，如果我们使用组件，它会根据我们是否传递 URL 来渲染，无论是否包含 href。最棒的是，我们的元素中没有重复元素。

例如，以下用例：

<ServiceCard title='test' description='foo bar' img='img1.jpg' />

它将返回以下 HTML 输出：

<section>
  <h2>test</h2>
  <p>foo bar</p>
  <img src="img1.jpg" alt="test" />
</section>

如果我们将 URL 放在元素中，我们将得到以下输出。

<section>
  <a href="url">
    <h2>test</h2>
    <p>foo bar</p>
    <img src="img1.jpg" alt="test" />
  </a>
</section>

很酷吧？

当然，主要的魔力发生在 ConditionalWrapper 组件中，准确地说，是包装器参数中。

由于我们传递了 children（这是 React 的默认 prop），我们可以看到我们的函数的用例就像在wrapper={children => <a href={url}>{children}</a>}状态中一样。

如果满足条件
将子元素包裹在这个特定的元素中

您可能只会在极少数情况下需要此功能，但它可以成为巨大的救星。

注：非常感谢Olivier的原创想法！

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。

文章来源：https://dev.to/dailydevtips1/conditional-wrapping-in-react-46o5