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

我和＃34;多个模态的代码＆＃34; modal是示例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

经过进一步调查后，这似乎是语义结束时的一个问题。幸运的是，这个问题确实存在PR。在此期间，我找到的解决方案是将Authorize添加到className="scrolling"中的变量ModalExampleMultiple。我编辑了上面的文件以反映这一点。没有更多的闪烁。

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>
    );
}

使用语义UI反应闪烁模态

2 个答案: