Question

{ null !== label && <FormLabel text={label} /> }
{ null !== icon && <FormIcon icon={icon} /> }

效果很好

{ null !== icon && <InputGroup> }
    <Test>
        Hello
    </Test>
{ null !== icon && </InputGroup> }

我有一个SyntaxError

我认为我无权在两种不同条件下打开和关闭标签，但我需要它

Answer 1

这是无效的语法。但是您可以通过使用InputGroup来声明ternary operator的条件定义

const Comp = icon !== null ? InputGroup : React.Fragment

return(
    <Comp>
        <span/>
    </Comp>
)

Answer 2

也许这样更好？

{
  null !== icon ? (
    <InputGroup>
      <Test>Hello</Test>
    </InputGroup>
  ) : (
    <Test>Hello</Test>
  );
}

或者这个：

const test = <Test>Hello</Test>;

{
  null !== icon ? <InputGroup>{test}</InputGroup> : test;
}

Answer 3

根据您的代码的第二个方面在语法上是不正确的，因为您无法在其结尾处进行条件视图和start标签，因为此处不可行，或者您可以在下面做一个自定义代码，

您可以使用三元运算符：

a > b ? a : b

代码：

{
    null !== icon ?
        <InputGroup>
            <Test>
                Hello
            </Test>
        </InputGroup> :
            <Test>
                Hello
            </Test>
}

我希望这会有所帮助。...谢谢：）

在两种不同条件下打开和关闭标签

3 个答案: