javascript - react.js antd模态错误行为

因此，我有一个很大的凌乱组件，我将尝试缩小它的体积，但是请保留其中大部分，因为我不确定此时可能是什么原因。

问题是游戏可以按预期运行。是时候渲染模态了，它出现在页面的左下角，没有样式浮在左边。但是，该功能可以正常工作，按钮可以正常工作，并且可以显示原始内容。

import { Modal } from 'antd';
//rest of imports

const initialState = {
  visible: false,
  streak: 0,
  score: 0,
  turn: 0,
  previousPicks: [],
  result: { result: "", player: "", computer: "" }
};

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.turnLimit = 10;
    this.state = initialState;
  }

  componentWillUnmount() {
    this.setState(initialState)
  }

  updateScore = () => {
    //handles score
  }

  updatePreviousPicks = () => {
    //update game data
  }

  onClickHandler = async (choice) => {
    //fetching data from backend
          self.showModal();
  }

  getAIResult = () => {
    //
  }

  showModal = () => {
    if (this.state.turn === 10) {
      this.setState({
        visible: true,
      });
    }
  }

  handleOk = () => {
    this.setState(initialState)
  }

  handleCancel = () => {
    this.setState(initialState)
  }

  render() {
    return (
      <div>
        <div>


        <Modal
          title="Basic Modal"
          centered={true}
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}></Modal>


          </div>
        <div className="container">
          <div id="rockDiv" className={`choice`} onClick={() => this.onClickHandler("rock")}>
            <Choices choice="rock"></Choices>
          </div>
          <div id="paperDiv" className={`choice`} onClick={() => this.onClickHandler("paper")}>
            <Choices choice="paper"></Choices>
          </div>
          <div id="scissorsDiv" className={`choice`} onClick={() => this.onClickHandler("scissors")}>
            <Choices choice="scissors"></Choices>
          </div>
          <Score score={this.state.score} bonus={this.state.streak} turn={this.state.turn} />
          <div id="PlayerResult" className={this.state.result.result}  >
            {this.state.turn >= 1 ? <p>You</p> : <p></p>}
            <Answer choice={`${this.state.result.player}`} />
          </div>
          <div id="AIResult" className={this.getAIResult()} >
            {this.state.turn >= 1 ? <p>AI</p> : <p></p>}
            <Answer choice={`${this.state.result.computer}`} />
          </div>
        </div>
      </div>
    )
  }
}

export default Game

我尝试从组件中删除所有CSS，但是模态不显示为默认的antd设计吗？

最佳答案

据我了解，您目前使用的样式不喜欢Antd的示例。
缺少的是您没有像这样导入Antd样式。

import { Modal, Button } from "antd";
import "antd/dist/antd.css";

只需要导入样式，您将拥有所需的内容。
您可以在这里查看我的示例https://codesandbox.io/embed/8lr93mw8yj