javascript - Material UI - 工具提示意外显示

Question

我在我的项目中使用 material-ui 和 react。我想做的是在满足特定条件时简单地更改工具提示(每个工具提示都包含一个图标)。

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"));

请查看codesandbox中的demo: demo link

现在的问题是，通过单击按钮从第一个工具提示更改后，第二个工具提示不会按预期显示。第二个工具提示的位置神奇地移到了左上角，这很奇怪。

感谢您的帮助。

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