Question

我对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配置，但我不确定。有想法吗？

Answer 1

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

Answer 2

好像您缺少工具提示组件的结束标记...

{ bUseTooltip && <Tooltip text='test' /> }

有两种方法来关闭组件标签

1-自动关闭

<Tooltip  />

2-相应的结束标记

<Tooltip> </Tooltip>

Answer 3

我有点傻。为了使其工作，我在返回中添加了额外的div元素。看来只有这样了。所以现在我的回报是这样的：

    return (
        <div>
            {value.bUseTooltip ? (
                <Tooltip
                    title={value.strTooltip}
                >
                    <Input
                        type="text"
                        value={value.strValue || strValue}
                        onFocus={funcTriggerFocus}
                        onChange={funcOnInputChange}
                        onBlur={funcTriggerBlur}
                        autoComplete="off"
                        id={strId}
                    />
                </Tooltip>
            ) : (
                <Input
                    type="text"
                    value={value.strValue || strValue}
                    onFocus={funcTriggerFocus}
                    onChange={funcOnInputChange}
                    onBlur={funcTriggerBlur}
                    autoComplete="off"
                    id={strId}
                />            
            )}
        </div>
    );

如果开始和结束标签处于不同的条件，它仍然不喜欢它。我会再玩一次。现在可以做到这一点，该组件不会改变100次，我也许可以将输入标签从return移到变量中，而不必更新两次并使它们相等。

工具提示的条件渲染似乎无法正常运行

3 个答案: