Material UI - всплывающая подсказка отображается неожиданно

Question

Я использую Material-UI с реагировать в моем проекте.Я хочу просто изменить всплывающую подсказку (каждая подсказка содержит значок), когда определенное условие выполнено.

ToolTipWrapper.js

import React from "react";
import { Tooltip } from "@material-ui/core";
import { CheckCircle, Error } from "@material-ui/icons";
import { green, deepOrange } from "@material-ui/core/colors";

class TooltipWrapper extends React.Component {
  render() {
    return this.props.error.length === 0 ? (
      <Tooltip title="meet all requirements" placement="bottom-start">
        <CheckCircle style={{ color: green[400] }} />
      </Tooltip>
    ) : (
      <Tooltip title="Not meet all requirements" placement="bottom-start">
        <Error style={{ color: deepOrange[400] }} />
      </Tooltip>
    );
  }
}

export default TooltipWrapper;

index.js

import React from "react";
import { render } from "react-dom";
import TooltipWrapper from "./TooltipWrapper.js";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      error: []
    };
  }
  handleClick = () => {
    this.setState({
      error: [123]
    });
  };

  render() {
    return (
      <div style={styles}>
        <TooltipWrapper error={this.state.error} />
        <button onClick={this.handleClick}>change</button>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Пожалуйста, проверьте это демо в codeandbox: Демонстрационная ссылка

Теперь проблема в том, что вторая подсказка не будет отображаться должным образомпосле изменения из первой всплывающей подсказки, нажав кнопку.Положение второй всплывающей подсказки волшебным образом переместилось в верхний левый угол, что довольно странно.

Спасибо за помощь.

Answer 1

попробуйте это.

import React from "react";
import { Tooltip } from "@material-ui/core";
import { CheckCircle, Error } from "@material-ui/icons";
import { green, deepOrange } from "@material-ui/core/colors";

class TooltipWrapper extends React.Component {
  render() {
    return (
      <Tooltip
        title={
          this.props.error.length === 0
            ? "meet all requirements"
            : "Not meet all requirements"
        }
        placement="bottom-start"
        id="test"
      >
        <span>
          {this.props.error.length === 0 ? (
            <CheckCircle style={{ color: green[400] }} aria-label="test" />
          ) : (
            <Error style={{ color: deepOrange[400] }} aria-label="test" />
          )}
        </span>
      </Tooltip>
    );
  }
}

export default TooltipWrapper;

рабочая версия песочницы.https://codesandbox.io/s/w2zkn847m5