标签：reactjs semantic-ui semantic-ui-react javascript
我正在使用语义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中.我编辑了上面的文件以反映这一点.不再闪烁.
标签：reactjs,semantic-ui,semantic-ui-react,javascript 来源： https://codeday.me/bug/20191110/2013394.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。