У меня есть окно чата для потока, и я хочу, чтобы у всплывающих подсказок реагировать на портал отображалась информация о пользователях при выборе их имени.
Видеотехника
Способ, которым реагирующие подсказки портала знают, к какому элементу dom поместить всплывающую подсказку, можно получить идентификатор элемента. Когда я жестко закодировал идентификатор, все работает просто отлично. Однако я не могу жестко написать код, потому что, как вы знаете, элементы чата генерируются динамически. Так что я пытался создать динамический бросок с использованием реквизита. Однако, когда я делаю это, он возвращается с этой ошибкой.
Теперь это происходит только тогда, когда я использую переменные в имени, поэтому реквизит. Я проверил значения для того, что вывод, и они верны, и что я хочу. Вот почему я запутался, потому что, если значение верное, но оно обрабатывает строку как неправильный тип данных.
Код компонента (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 является правильным, на самом деле ВСЕ работает отлично, когда я жестко кодирую идентификатор, моя проблема находится внутри компонента ToolTip с атрибутом parent.