反应工具提示动态 ID

Question

我正在开发一个反应应用程序并使用reactstrap。

我正在使用 reactstrap 的工具提示组件，它需要一个目标属性，即目标元素 id 的值。这个 id 是动态生成的，似乎 reactstrap 工具提示不喜欢它。

组件如下所示：

电影卡.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Col, Card, CardImg, CardBody, CardTitle, CardSubtitle, CardText, Button, Tooltip } from 'reactstrap';
import { LimitedTextTitle } from '../custom-styled/CustomStyledComponents';
class MovieCard extends Component {  
  constructor (props) {
    super(props);
    this.state = {
      open: false
    };
    this.toggle = this.toggle.bind(this);
  }
  toggle () {
    this.setState({
      open: !this.state.open
    })
  }
  render () {
    const { imdbID, Title, Year, Rated, Plot, Country, Poster } = this.props.movie;
    return (
  <Col md="4">
    <Card>
      <CardImg
        top
        width="100%"
        src={Poster}
        alt="blah"
      />
    </Card>
    <CardBody>
      <CardTitle>
        <LimitedTextTitle id={imdbID}>
          {`${Title} - (${Year})`}
        </LimitedTextTitle>
        <Tooltip placement='top' target={imdbID} isOpen={this.state.open} toggle={this.toggle}>
          {Title}
        </Tooltip>
      </CardTitle>
      <CardSubtitle>{`Rated: ${Rated} Country: ${Country}`}</CardSubtitle>
      <CardText>{Plot}</CardText>
      <Button>Read More</Button>
    </CardBody>
  </Col>
);
  }
}
MovieCard.propTypes = {
  movie: PropTypes.object.isRequired // eslint-disable-line
};
export default MovieCard;

有什么建议吗？

反应 16.2.0

反应 5.0.0-alpha.4

Answer 1

正在处理类似的问题。

添加

代码作为答案，因为我无法在上面添加注释......

希望它能帮助您或任何其他遇到此问题的人。

描述：对动态生成的元素使用 reactstrap 工具提示。

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, Tooltip } from 'reactstrap';
class App extends React.Component {
  state = {};
  toggle = targetName => {
    if (!this.state[targetName]) {
      this.setState({
        ...this.state,
        [targetName]: {
          tooltipOpen: true
        }
      });
    } else {
      this.setState({
        ...this.state,
        [targetName]: {
          tooltipOpen: !this.state[targetName].tooltipOpen
        }
      });
    }
  };
  isToolTipOpen = targetName => {
    return this.state[targetName] ? this.state[targetName].tooltipOpen : false;
  };
  render() {
    return (
      <div>
        {[1, 2, 3, 4, 5, 6].map((x, i) => (
          <div key={`div-${i}`}>
            <Button color="link" id={`btn-${i}`}>
              {x}
            </Button>
            <Tooltip
              placement="right"
              isOpen={this.isToolTipOpen(`btn-${i}`)}
              target={`btn-${i}`}
              toggle={() => this.toggle(`btn-${i}`)}>
              Hello world!
            </Tooltip>
          </div>
        ))}
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

反应：16.9.0

反应：8.0.1

https://codesandbox.io/embed/angry-taussig-fup7i?fontsize=14

Answer 2

尤里卡我明白了!!基于Meir Keller的答案，无需检查工具提示的状态是否已存在。如果它不存在，则默认false...

只要定义了状态，即使它是空状态，这也有效。

这是使用reactstrap的Popover，但它是相同的概念。

import React, { Component, Fragment } from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css'
import { Container, Row, Col, Input, Button, Popover } from 'reactstrap';
class App extends Component {
  state = {};
  toggle = (target) => {
    // console.log(typeof target) // make sure this is a string
    this.setState({
      ...state,
      [target]: !this.state[target]
    });
  };
  render() {
    return (
      <Container>
      {["Hello", "Greetings"].map((name) => (
      <Row>
      <Fragment>
          <Button id={name} type="button">{name}</Button>
          <Popover placement="right" 
          isOpen={this.state[`${name}`]} 
          target={name}
          toggle={() => this.toggle(`${name}`)}>
          <PopoverBody>
            You've got mail. Did you know?
            </PopoverBody>
            </Popover>
            </Fragment>
      </Row>
      ))}
      </Container>
    );
  }
}
export default App;

Answer 3

在模块化或组件目录中创建一个新组件并粘贴此代码

import React, { useState } from "react";
import { Tooltip } from "reactstrap";
const TooltipItem = props => {
    const { position='top', id } = props;
    const [tooltipOpen, setTooltipOpen] = useState(false);
    const toggle = () => setTooltipOpen(!tooltipOpen);
    return (
        <span>
      <span id={"tooltip-" + id}>
            {props.children}
      </span>
      <Tooltip
          placement={position}
          isOpen={tooltipOpen}
          target={"tooltip-" + id}
          toggle={toggle}
      >
          {props.title}
      </Tooltip>
    </span>
    );
};

export default TooltipItem;

现在导入并使用此工具提示组件

import TooltipItem from "../Tooltip";
 <TooltipItem id={'edit' + data.id} title={'Edit Store'}>
    <i className="fas fa-edit pointer" onClick={() => this.onEditClick(data)}/>
  </TooltipItem>

Answer 4

我想

为它添加一个答案，因为已经有很多人提到了许多处理这个问题的方法。但是reactStrap工作得很好，大多数初学者在创建id时使用特殊字符时都会这样做，例如：

- _ / @，甚至可以是space

只需保持id，字符和数字的非常简单组合即可正常工作

Answer 5

新组件UncontrolledTooltip将解决问题。只需使用

 <UncontrolledTooltip
   placement="right"
   target={`btn-${i}`}
 >
   {props.title}
 </UncontrolledTooltip>

Answer 6

我尝试了很多解决方案，但当目标元素不在 Dom 中时，Reactstrap 工具提示崩溃仍然遇到问题。

我

结合了人们发布的其他几个解决方案，这是它对我有用的唯一方式。条件渲染 FTW。

const ElementWithTooltip = ({
    dynamicIdentifier, // string, number, w/e
}): ReactElement => {
    // Target element state.
    const [isTargetReady, setIsTargetReady] = useState(false);
    
    // Target element ref.
    const tooltipRef = useRef(null);
 
    // Hook to recognize that the target is ready.
    useEffect(() => {
        const targetElement = tooltipRef.current;
        if (targetElement) {
            setIsTargetReady(true);
        }
      }, [tooltipRef.current]);
    // TSX.
    return (
        <>
            <span ref={tooltipRef}>This is the target element</span>
            {isTargetReady && <UncontrolledTooltip autohide={false} target={tooltipRef}>
                Tooltippy text stuff
            </UncontrolledTooltip>}
        </>
    );

Answer 7

imdbID很可能以数字开头，即 123abcdefghijklmno1234567890

请记住，当 ID 以数字开头时，工具提示不起作用，即工具提示的目标不能以整数开头。

您需要做的就是更改以下内容：

<CardTitle>
    <LimitedTextTitle id={imdbID}>
      {`${Title} - (${Year})`}
    </LimitedTextTitle>
    <Tooltip placement='top' target={imdbID} isOpen={this.state.open} toggle={this.toggle}>
      {Title}
    </Tooltip>
</CardTitle>

对此：

<CardTitle>
    <LimitedTextTitle id={`movie-${imdbID}`}>
      {`${Title} - (${Year})`}
    </LimitedTextTitle>
    <Tooltip placement='top' target={`movie-${imdbID}`} isOpen={this.state.open} toggle={this.toggle}>
      {Title}
    </Tooltip>
</CardTitle>

您可以通过简单地切换到处理所有切换本身的UncontrolledTooltip来避免使用状态，而无需要求您显式处理，例如：

<CardTitle>
    <LimitedTextTitle id={`movie-${imdbID}`}>
      {`${Title} - (${Year})`}
    </LimitedTextTitle>
    <UncontrolledTooltip placement='top' target={`movie-${imdbID}`}>
      {Title}
    </UncontrolledTooltip>
</CardTitle>

Answer 8

在 react js 的工具提示中渲染动态内容非常简单。使用 ReactTooltip。为了完全理解，请查看以下示例。在这里，我将在工具提示中动态添加requestId。

{
completedTransactions.map((item, id) => (
<tr key={id + 1}>
  <td>{id + 1}</td>
  <td>
    <span data-tip={item.requestId} data-for="registerTip">
      {item.TransactionId}
    </span>
    <ReactTooltip id="registerTip" place="top" />
  </td>
  <td>{item.groupName}</td>
  <td>{item.purposeName}</td>
  <td>{dateFormat(item.update, "dd-mm-yyyy hh:mm tt")}</td>
 </tr>

((;}