我正在使用语义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"
  }
}

解决方法:

经过进一步调查,看来这是语义学的一个问题.幸运的是,有一个确切的公关.在此期间,我发现的解决方案是将className =“ scrolling”添加到QuizModalMike.js中的变量ModalExampleMultiple中.我编辑了上面的文件以反映这一点.不再闪烁.