react.js antd模态错误行为

Question

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

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

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>

      </div>

    )

  }

}

export default Game

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

Answer 1

<Modal&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title="Basic Modal"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; centered="true"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; visible={this.state.visible}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onOk={this.handleOk}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onCancel={this.handleCancel}></Modal>您不需要"true"在此处包装括号，因为您没有调用变量。