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

Question

我有一个流的聊天框，我希望 react-portal-tooltips 在我 select 名字时有一个下拉列表来显示用户信息。

视觉

react-portal-tooltips 知道将工具提示放在哪个 dom 元素下的方法是获取元素 ID。当我对所有内容中的 id 进行硬编码时，一切正常。但是我不能硬编码，因为如您所知，聊天项是动态生成的。所以我一直在尝试创建一个 id dynamical 抛出使用的道具。然而，当我这样做时，它 returns 出现了这个错误。

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

组件代码 (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 进行硬编码时一切正常，我的问题出在具有父属性的 ToolTip 组件中。

Answer 1

错误非常清楚：

#10_Torrent45 is not a valid selector

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

TLDR：不能以数字开头。

修复：

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

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

Generated id in React returning error when using react-portal-toolip

reactjs

template-literals