Question

以下是我在使用semantic UI React modal时遇到的问题：我在网站上显示的情况很糟糕，但奇怪的是我的Modal像this GIF of what is happening一样移动。

我不知道如何解决这个问题。这是我的代码：

class Success extends React.Component {
  constructor () {
    super();
    this.closeModal = this.closeModal.bind(this)
    this.state = {
      Modalopen: true,
      Orders: "",
      urlparameter: qs.parse(location.search.replace(/^.*?\=/, ''))
    }
  }

  closeModal () {
    this.setState({Modalopen: false})
    this.props.history.pushState(null, "/")
  }

  render () {
    return (
      <Modal open={this.state.Modalopen}>
        <Modal.Header>Success!</Modal.Header>
        <Modal.Content image>
          <Image wrapped size='medium' src='http://semantic-ui.com/images/avatar2/large/rachel.png' />
          <Modal.Description>
            <Header>Thank you</Header>
            <p>bla bla bla</p>
            <Button color='green' onClick={this.closeModal} inverted>
              <Icon name='checkmark' /> Got it
            </Button>
          </Modal.Description>
        </Modal.Content>
      </Modal>
    );
  }
}

可能导致此问题的原因是什么？谢谢。

Answer 1

今天我在尝试创建自定义“全屏”模式时遇到了同样的问题。

这是给我们造成麻烦的线...

https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Modal/Modal.js#L255

如果模态height大于或等于window.innerHeight，它将添加带有一系列样式的类scrolling。

setPositionAndClassNames然后似乎在第271行上被递归调用，这可能导致怪异的循环行为。

肮脏的修补程序

我正在向自己的模式中添加margin-bottom: 1px，以确保它比window.innerHeight少一点。

长期解决方案

我将在semantic-ui-react中打开PR，看看他们怎么说...

更新

我在https://github.com/Semantic-Org/Semantic-UI-React/pull/3024开设了一个PR，并提供了建议的修复程序。

更新

已合并，现在是语义UI React的一部分。

Answer 2

就我而言，它通常会创建模态。

这是测试代码（ES5 / webpack）：

<强> [index.html的]

<!DOCTYPE html>
<html lang="ko-KR">
<head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>
</head>
<body>
    <div id="wrap"></div>
    <script src="dist/app.js"></script>
</body>
</html>

[app.jsx]

var React = require('react');
var ReactDOM = require('react-dom');
var Semantic = require('semantic-ui-react');
var Button = Semantic.Button;
var Header = Semantic.Modal.Header;
var Image = Semantic.Image;
var Modal = Semantic.Modal;
var Icon = Semantic.Icon;

var IndexPage = React.createClass({
    getInitialState : function() {
        return {
            Modalopen: true,
            Orders: "",
            //urlparameter: qs.parse(location.search.replace(/^.*?\=/, ''))
        }
    },

    closeModal: function() {
        this.setState({Modalopen: false})
        //this.props.history.pushState(null, "/")
    },

    render : function () {
        return (
            <Modal open={this.state.Modalopen}>
                <Modal.Header>Success!</Modal.Header>
                <Modal.Content image>
                    <Image wrapped size='medium' src='http://semantic-ui.com/images/avatar2/large/rachel.png' />
                    <Modal.Description>
                        <Header>Thank you</Header>
                        <p>bla bla bla</p>
                        <Button color='green' inverted>
                            <Icon name='checkmark' /> Got it
                        </Button>
                    </Modal.Description>
                </Modal.Content>
            </Modal>
        );
    }
});

ReactDOM.render(<IndexPage/>, document.getElementById('wrap'));

Image of Result by the upper code

如果你不断得到错误，请使用Codepen添加html / js文件的更多详细信息，以便根据您的情况进行测试。

语义反应模态奇怪的高度行为

2 个答案:

肮脏的修补程序

长期解决方案

更新

更新