需要帮助！我正在编写反应应用程序。 我安装了最新版本：react 16.2.0，react-dom 16.2.0，react-bootstrap 0.31.5，react-overlays 0.7.4
我希望该组件有state.show = {false}，并且不应该出现在页面加载上。但它似乎。按钮＆＃39;关闭＆＃39;没有将布尔值传递给组件的状态。
这是我的模态组件：AddNewStoreModalDialog.js
import React, { Component } from 'react'
import { Modal, Button } from 'react-bootstrap';
class AddNewStoreModalDialog extends Component {
constructor(props) {
super(props);
this.state = {
showModal: false
};
this.open = this.open.bind(this);
this.close = this.close.bind(this);
}
open() {
this.setState({ showModal: true });
}
close() {
this.setState({ showModal: false });
}
render() {
return(
<div id="add-new-store-modal">
<Modal.Dialog show={this.state.showModal} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title>Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>
One fine body...
</Modal.Body>
<Modal.Footer>
<Button onClick={this.close}>Close</Button>
<Button bsStyle="primary">Save changes</Button>
</Modal.Footer>
</Modal.Dialog>
</div>
);
}
}
export default AddNewStoreModalDialog;
这是插入的地方： App.js
import React, { Component } from 'react';
import './App.css';
import StoreContainer from './components/StoreContainer'
import GoogleMap from './components/GoogleMap'
import NavBarHeader from './components/NavBarHeader'
import AddNewStoreModalDialog from './components/AddNewStoreModalDialog'
class App extends Component {
render() {
return(
<div className="App">
<AddNewStoreModalDialog />
<div class="header">
<NavBarHeader />
</div>
<div class="main-container">
<div class="left-container">
<GoogleMap />
</div>
<div class="right-container">
<StoreContainer />
</div>
</div>
</div>
)
}
}
export default App;
这是我的index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
和index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/<version>/react-bootstrap.min.js"></script>-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyADa-s_wErrhpWEs1iLQDKVE2BOg-E92EU"></script>
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
控制台日志：
index.js:2177 Warning: Received `false` for a non-boolean attribute `show`.
If you want to write it to the DOM, pass a string instead: show="false" or show={value.toString()}.
If you used to conditionally omit it with show={condition && value}, pass show={condition ? value : undefined} instead.
in div (created by ModalDialog)
in ModalDialog (at AddNewStoreModalDialog.js:25)
in div (at AddNewStoreModalDialog.js:24)
in AddNewStoreModalDialog (at App.js:12)
in div (at App.js:11)
in App (at index.js:7)
__stack_frame_overlay_proxy_console__ @ index.js:2177
printWarning @ warning.js:33
warning @ warning.js:57
validateProperty$1 @ react-dom.development.js:13555
warnUnknownProperties @ react-dom.development.js:13580
validateProperties$2 @ react-dom.development.js:13600
validatePropertiesInDevelopment @ react-dom.development.js:13639
setInitialProperties$1 @ react-dom.development.js:13906
finalizeInitialChildren @ react-dom.development.js:14989
completeWork @ react-dom.development.js:8648
completeUnitOfWork @ react-dom.development.js:10132
performUnitOfWork @ react-dom.development.js:10234
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap 93160685b6ed6746a2f2:678
fn @ bootstrap 93160685b6ed6746a2f2:88
0 @ registerServiceWorker.js:108
__webpack_require__ @ bootstrap 93160685b6ed6746a2f2:678
./node_modules/ansi-regex/index.js.module.exports @ bootstrap 93160685b6ed6746a2f2:724
(anonymous) @ bootstrap 93160685b6ed6746a2f2:724
index.js:2177 Warning: Unknown event handler property `onHide`. It will be ignored.
in div (created by ModalDialog)
in ModalDialog (at AddNewStoreModalDialog.js:25)
in div (at AddNewStoreModalDialog.js:24)
in AddNewStoreModalDialog (at App.js:12)
in div (at App.js:11)
in App (at index.js:7)
__stack_frame_overlay_proxy_console__ @ index.js:2177
printWarning @ warning.js:33
warning @ warning.js:57
validateProperty$1 @ react-dom.development.js:13489
warnUnknownProperties @ react-dom.development.js:13580
validateProperties$2 @ react-dom.development.js:13600
validatePropertiesInDevelopment @ react-dom.development.js:13639
setInitialProperties$1 @ react-dom.development.js:13906
finalizeInitialChildren @ react-dom.development.js:14989
completeWork @ react-dom.development.js:8648
completeUnitOfWork @ react-dom.development.js:10132
performUnitOfWork @ react-dom.development.js:10234
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap 93160685b6ed6746a2f2:678
fn @ bootstrap 93160685b6ed6746a2f2:88
0 @ registerServiceWorker.js:108
__webpack_require__ @ bootstrap 93160685b6ed6746a2f2:678
./node_modules/ansi-regex/index.js.module.exports @ bootstrap 93160685b6ed6746a2f2:724
(anonymous) @ bootstrap 93160685b6ed6746a2f2:724
index.js:2177 Warning: Invalid DOM property `class`. Did you mean `className`?
in div (at App.js:13)
in div (at App.js:11)
in App (at index.js:7)
__stack_frame_overlay_proxy_console__ @ index.js:2177
printWarning @ warning.js:33
warning @ warning.js:57
validateProperty$1 @ react-dom.development.js:13539
warnUnknownProperties @ react-dom.development.js:13580
validateProperties$2 @ react-dom.development.js:13600
validatePropertiesInDevelopment @ react-dom.development.js:13639
setInitialProperties$1 @ react-dom.development.js:13906
finalizeInitialChildren @ react-dom.development.js:14989
completeWork @ react-dom.development.js:8648
completeUnitOfWork @ react-dom.development.js:10132
performUnitOfWork @ react-dom.development.js:10234
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap 93160685b6ed6746a2f2:678
fn @ bootstrap 93160685b6ed6746a2f2:88
0 @ registerServiceWorker.js:108
__webpack_require__ @ bootstrap 93160685b6ed6746a2f2:678
./node_modules/ansi-regex/index.js.module.exports @ bootstrap 93160685b6ed6746a2f2:724
(anonymous) @ bootstrap 93160685b6ed6746a2f2:724
StoreContainer.js:16 {data: Array(3), status: 200, statusText: "OK", headers: {…}, config: {…}, …}
webpackHotDevClient.js:136 ./src/components/NavBarHeader.js
Line 10: Links must not point to "#". Use a more descriptive href or use a button instead jsx-a11y/href-no-hash
printWarnings @ webpackHotDevClient.js:136
handleWarnings @ webpackHotDevClient.js:153
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:206
./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js:51
(anonymous) @ main.js:274
./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage @ main.js:272
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @ emitter.js:50
WebSocketTransport.ws.onmessage @ websocket.js:35
webpackHotDevClient.js:136 ./src/components/GoogleMap.js
Line 28: 'marker' is assigned a value but never used no-unused-vars
答案 0 :(得分：1)
使用<Modal>代替<Modal.Dialog>
查看example of a basic modal from react-bootstraps component page。