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

Question

所以我有这个大杂乱的组件，我会尝试将其精简，但保留大部分内容，因为此时我不确定可能是什么原因。

问题是，游戏是否按预期运行。当需要呈现模态时，它会出现在页面的左下角，没有样式 float 。然而，该功能按预期工作，按钮工作并显示原始内容。

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 设计？

Answer 1

据我了解，您当前的风格不喜欢 Antd 的示例。 缺少的是你没有像这样导入 Antd 的样式。

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

只需要导入样式你就会有你需要的。 你可以在这里查看我的示例 https://codesandbox.io/embed/8lr93mw8yj