使用語義UI反應閃爍模態

Question

我正在使用Semantic UI React庫來應用模態。 當模態被觸發時，它開始閃爍，我不能為我的生活找出原因。 任何幫助表示贊賞。

在使用Semantic之前，我確實安裝了Bootstrap，但是當Semantic被引入這個項目時就被刪除了。 其他有閃爍問題的人通過刪除Bootstrap解決了這個問題 。 但因為我之前已將其移除並且閃爍繼續，我不知所措。 我確實刪除了我的package-lock.json並運行了npm install但遺憾的是沒有解決這個問題。

在我忘記之前，Chrome和FF都會發生閃爍。

以下路徑顯示了與模態接觸的所有文件的布局方式。

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

• 注意：這是一個組項目，並非所有代碼都是由我編寫的。

QuizModalMike.js

我的“多模態”模式的代碼是此處示例的副本。 即使沒有應用任何更改，也會發生閃爍。

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"添加到ModalExampleMultiple中的變量QuizModalMike.js 。 我編輯了上面的文件以反映這一點。 沒有更多的閃爍。

Answer 2

我遇到類似的問題，通過設置className =“scrolling”它將起作用，ut的位置將不會居中。

一個更好的解決方案是在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>
    );
}