时间戳

首页 > 解决方案 > 工具提示的条件渲染似乎无法正常工作

reactjs - 工具提示的条件渲染似乎无法正常工作

问题描述

我对 antd 项目的反应中有以下代码

    return (
        { bUseTooltip && <Tooltip text='test'> }
        <Input
            type="text"
            value={value.strValue || strValue}
            onFocus={funcTriggerFocus}
            onChange={funcOnInputChange}
            onBlur={funcTriggerBlur}
            autoComplete="off"
            id={strId}
        />
        { bUseTooltip && </Tooltip> }
    );

如果 'bUseTooltip' 设置为 true，这应该做的是呈现 'tooltip' 元素。相反，我收到了预期有逗号的编译错误。

  40:23  error  Parsing error: Unexpected token, expected ","

  38 |
  39 |     return (
> 40 |         { bUseTooltip && <Tooltip text='test'> }
     |                       ^
  41 |         <Input
  42 |             type="text"
  43 |             value={value.strValue || strValue}

✖ 1 problem (1 error, 0 warnings)

 @ ./src/components/form/FormItem/index.js 16:0-50 78:38-51
 @ ./src/domain/public/Login/index.jsx
 @ ./src/domain/public/Home/index.jsx
 @ ./src/App.jsx
 @ ./src/index.js

ERROR in ./src/components/input/TextField/index.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Workspace\Projects\......\src\components\input\TextField\index.jsx: Unexpected token, expected "," (40:22)

它可能是 babel 配置，但我不确定。一些想法？

标签： reactjsbabeljsantd

解决方案

我认为这可能与您的组件返回多个未包装在单个父组件中的 Dom 兄弟元素有关。尝试将整个 jsx 包装在一个反应​​片段组件（<>...</>）中，看看是否可行

推荐阅读