使用语义 UI React 闪烁模态

Question

我正在使用 Semantic UI React 库应用模式。当模态被触发时，它开始闪烁，我一生都无法弄清楚为什么。任何帮助表示赞赏。

在使用 Semantic 之前，我确实安装了 Bootstrap，但是当 Semantic 被引入这个项目时，它被删除了。其他拥有flickering issue 的人通过删除 Bootstrap 解决了这个问题。但是因为我之前已经删除了它并且闪烁仍在继续，我很茫然。我确实删除了我的package-lock.json 并运行了npm install，但不幸的是这并没有解决这个问题。

在我忘记之前，Chrome 和 FF 上确实会发生闪烁。

以下路径显示了所有与模态框接触的文件的布局方式。

index.js
  |_App.js
      |_Router.js
          |_EventPage.js
              |_Jumbotron.js
                  |_QuizModalMike.js

• 注意：这是一个小组项目，并非所有代码都是由我编写的。

QuizModalMike.js

我的“多模态”模态代码是示例found here 的副本。即使未应用任何更改，也会发生闪烁。

import React, { Component } from 'react'
import { Button, Icon, Modal } from 'semantic-ui-react'

class NestedModal extends Component {
  state = { open: false }

  open = () => this.setState({ open: true })
  close = () => this.setState({ open: false })

  render() {
    const { open } = this.state

    return (
      <Modal
        dimmer={false}
        open={open}
        onOpen={this.open}
        onClose={this.close}
        size='small'
        trigger={<Button primary icon>Proceed <Icon name='right chevron' /></Button>}
      >
        <Modal.Header>Modal #2</Modal.Header>
        <Modal.Content>
          <p>That's everything!</p>
        </Modal.Content>
        <Modal.Actions>
          <Button icon='check' content='All Done' onClick={this.close} />
        </Modal.Actions>
      </Modal>
    )
  }
}

const ModalExampleMultiple = () => (
  <Modal 
    // ------------- fix -------------
    className="scrolling"
    // -------------------------------
    trigger={<Button>Multiple Modals</Button>}>
    <Modal.Header>Modal #1</Modal.Header>
    <Modal.Content image>
      <div className='image'>
        <Icon name='right arrow' />
      </div>
      <Modal.Description>
        <p>We have more to share with you. Follow us along to modal 2</p>
      </Modal.Description>
    </Modal.Content>
    <Modal.Actions>
      <NestedModal />
    </Modal.Actions>
  </Modal>
)

export default ModalExampleMultiple

Jumbotron.js

import React, { Component } from 'react';
import {
  Segment,
  Container,
  Header,
  Button,
  Icon,
  Label,
  Divider
} from 'semantic-ui-react';
import ModalExampleMultiple from './QuizModalMike';


class Jumbotron extends Component {
  state = {};

  render() {
    return (
      <div>
        <Segment
          inverted
          textAlign="center"
          style={{
            minHeight: 700,
            padding: '1em 0em',
            display: 'flex',
            flexDirection: 'column'
          }}
          vertical
        >
          <Segment
            inverted
            style={{
              fontSize: '4em',
              fontWeight: 'normal',
              marginBottom: 0,
              marginTop: '1em',
              alignSelf: 'left'
            }}
          />
          <Container text>
            <Header
              as="h1"
              content="Coffee Meets Code Event"
              inverted
              style={{
                fontSize: '4em',
                fontWeight: 'normal',
                marginBottom: 0,
                marginTop: 0
              }}
            />
            <Header
              as="h2"
              content="Network with developers and technical recruiters from high quality companies."
              inverted
              style={{ fontSize: '1.7em', fontWeight: 'normal' }}
            />
            {/* <QuizModal /> */}
            <ModalExampleMultiple />            
          </Container>
        </Segment>
      </div>
    );
  }
}

export default Jumbotron;

EventPage.js

import React, { Component } from 'react';
import Jumbotron from './Jumbotron';
import Description from './Description';
import Participants from './Participants';

class EventPage extends Component {
  state = {}

  render(){
    return (
      <div>
        <Jumbotron />
        <Description />
        <Participants />
      </div>
    );
  }
}

export default EventPage;

Router.js

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import * as actions from '../actions';
import Header from './common/Header';
import Landing from './landing/Landing';
import EventPage from './event/EventPage';

class Router extends Component {
  componentDidMount() {
    this.props.fetchUser();
  }

  render() {
    return (
      <div>
        <BrowserRouter>
          <div>
            <Header />
            <Route exact path="/" component={Landing} />
            {/* Temporary link for development */}
            <Route exact path="/event-page" component={EventPage} />
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

export default connect(null, actions)(Router);

App.js

import React, { Component } from 'react';
import Router from './Router';

class App extends Component {
  render() {
    return (
      <div>
        <Router />
      </div>
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import 'semantic-ui-css/semantic.min.css';
import reducers from './reducers';

const store = createStore(reducers, {}, applyMiddleware(reduxThunk));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
, document.getElementById('root'));

package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": {
    "/auth/*": {
      "target": "http://localhost:1738"
    },
    "/api/*": {
      "target": "http://localhost:1738"
    }
  },
  "dependencies": {
    "axios": "^0.17.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^1.1.0",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "semantic-ui-css": "^2.2.12",
    "semantic-ui-react": "^0.77.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Answer 1

经过进一步调查，这似乎是 Semantic 的问题。幸运的是，这个确切的问题有一个 PR。在此期间，我找到的解决方案是将className="scrolling" 添加到QuizModalMike.js 内的变量ModalExampleMultiple。我编辑了上面的文件以反映这一点。不再闪烁。

Answer 2

我遇到了类似的问题，通过设置 className="scrolling" 它会起作用，但是 ModalBox 的位置不会居中。

一个更好的解决方案是在 CSS 中设置一个固定的高度！

  <Modal style={{height: 300}} dimmer={this.state.dimmer} open={this.state.open} onClose={this.state.close}>
            <Modal.Header>Link to this conclusion</Modal.Header>
            <Modal.Content>
                <Input focus placeholder='Search...' />
                <Modal.Description>
                    <p>Visible to members in the team.</p>
                </Modal.Description>
            </Modal.Content>
        </Modal>
    );
}