Question

我有一个这样的情况，在车把中，我们可以有条件地仅渲染父级的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)

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

Answer 1

就像已经指出的那样，您需要在props.showImage ?周围加上花括号以使其成为JS，而不仅仅是HTML中的字符串。这导致您的两个div被视为需要关闭的开始标签。

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

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

在React JSX中有条件的父级打开Div

1 个答案: