使用 react-portal-tooltip 时在 React 中生成的 id 返回错误

Question

我有一个流的聊天框，我希望 react-portal-tooltips 有一个下拉菜单，以便在我选择用户姓名时显示用户信息。

视觉

react-portal-tooltips 知道在哪个 dom 元素下放置工具提示的方法是获取元素 id。当我对所有内容中的 id 进行硬编码时，一切正常。但是我不能硬编码，因为你知道聊天项目是动态生成的。所以我一直在尝试创建一个 id 动态投掷使用的道具。但是，当我这样做时，它会返回此错误。

现在只有当我在名称中使用变量时才会发生这种情况。我已经检查了输出的值，它们是正确的以及我想要的。这就是我感到困惑的原因，因为如果值是正确的，但它会将字符串视为不正确的数据类型。

组件代码 (React.js)

这是每个单独生成的聊天项目的组件。

import React, { Component } from 'react';
import styled from 'styled-components';

import ToolTip from 'react-portal-tooltip';

class ChatItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isTooltip: false
        };
    }

    render(props) {
        const { isTooltip, stampId } = this.state;
        const { id, userColor, time, name, message } = this.props;

        return (
            <Container>
                <Content id={`${id}_${name}`}>
                    <Stamp
                        userColor={userColor}
                        onClick={() => this.setState(prevState => ({isTooltip: !prevState.isTooltip}))}>
                        ({time}) {name}
                    </Stamp>: {message}
                </Content>

                <ToolTip
                    active={isTooltip}
                    position="bottom"
                    arrow="center"
                    parent={`#${id}_${name}`}
                    style={userTooltip}
                >
                    <h1>{name}</h1>
                </ToolTip>
            </Container>
        );
    }
}

export default ChatItem;

哦，在有人问 onClick 方法是否正确之前，事实上，当我对 ID 进行硬编码时，一切都可以正常工作，我的问题在于具有 parent 属性的 ToolTip 组件内部。

Answer 1

错误非常清楚：

#10_Torrent45 is not a valid selector

有效的 ID 选择器：What characters are allowed in DOM IDs?

TLDR：不能以数字开头。

修复：

<Content id={`content_${id}_${name}`}>