Question

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

我正在使用reactstrap的Tooltip Component，它需要一个target属性，即target元素id的值。这个id是动态生成的，似乎反应带工具提示不喜欢它。

组件看起来像：

MovieCard.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;

有什么建议吗？

反应vesion 16.2.0

reactstrap 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.6.3

restraps：6.5.0

Answer 2

EUREKA我知道了！！！基于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 一个非常简单的字符和数字组合 reactstrap 就可以正常工作

reactstrap工具提示动态ID

4 个答案: