时间戳

首页 > 解决方案 > 条件父在 React JSX 中打开 Div

reactjs - 条件父在 React JSX 中打开 Div

问题描述

我有一个这样的案例，在车把中，我们可以有条件地只渲染父打开 div，现在，我正在转向 React，所以遇到了以下问题。

const ProductBlock: FC<Props> = (props: Props): JSX.Element => (
   <div className="image">
      // render the opening div conditionally
      {
       props.showImage ? 
       (
         <div className="show-review-image">
       )
       :
       (
         <div className="show-old-image">
       )
      }
      // this div will be the child of the above resulting conditional div
      <div className="child-div">
        <ul className="inline-list">
          {
            props.myArr.map((attribute: authorAttribute, index: number): JSX.Element => (
              <li key={index}>
                {attribute.key} {attribute.value}
              </li>
            ))
          }
        </ul>
      </div>
   </div>
</div>
);

这样做时，我收到了错误 JSX element 'div' has no corresponding closing tag.ts(17008)

我的问题是，是否可以像上面那样做？

标签： reactjsjsx

解决方案

正如有人已经指出的那样，您需要大括号props.showImage ?才能使其成为 JS 而不仅仅是 HTML 中的字符串。这导致您的两个divs 都被视为需要关闭的开始标签。

然而，还有一个更深层次的问题。您的三元运算符无法按照您希望的方式工作。两个选项都必须是完整的表达式，而不是表达式的部分开头。<div className="show-review-image">不是一个完整的表达式。<div className="show-review-image></div>是。因此，条件表达式中的两个路径都必须为它们打开的任何标签都有结束标签。

也就是说，解决方案很简单。将三元表达式放在类名本身中：<div className={ props.showImage ? "show-review-image" : "show-old-image" } >

推荐阅读