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进行硬编码时，我的问题就在于我的问题在于具有父属性的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返回错误

1 个答案: