无法呈现react-bootstrap ModalTrigger
无法呈现react-bootstrap ModalTrigger
提问于 2016-11-11 00:05:22
我是ReactJS的新手，在呈现一个用于在单独组件中显示/隐藏模式的ModalTrigger时遇到了麻烦。我使用的样板是react-starter-kit。
返回的错误是：“不变违规:元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但got: undefined。请检查MenuButton的render方法。”
似乎不太可能在返回前将组件转换为字符串.代码如下：
import React, {PropTypes, Component} from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import ModalTrigger from 'react-bootstrap';
import Menu from '../Menu';
import s from './MenuButton.css';
class MenuButton extends Component {
static getInitialState() {return {isMenuOpen: false}};
constructor() {
super();
this.state = {isMenuOpen: false};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
if(this.state) {
this.setState({isMenuOpen: !(this.state.isMenuOpen)});
}
}
render() {
var btnImage = require('./menuButton.svg');
var show = {show: this.state};
console.log('menu ' + <Menu/>);
return (
<ModalTrigger modal={<Menu />}>
<div className={s.menuBtn}>
<a onClick={this.handleClick.bind(this)}>
<img className={s.menuBtnImg} src={btnImage}/> {show} {this.state.isMenuOpen ? 'Stäng meny' : 'Meny'}
</a>
</div>
</ModalTrigger>
);
}
}
export default withStyles(s)(MenuButton);然后是模式：
import React, { Component } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Menu.css';
class Menu extends Component {
static getInitialState() {return {show: false}};
static showModal(){
this.setState({show: true});
};
static hideModal() {
this.setState({show: false});
}
render() {
if (!this.state.show) {
return <span/>;
}
return (
<Modal {...this.props} title='Meny' animation={true}>
<div className='modal-body'>
<ul>
<a href="#main"><li>Startsida</li></a>
<a href="#omoss"><li>Om oss </li></a>
<a href="#reminiscens"><li>Reminiscens</li></a>
<a href="#appen"><li>Appen</li></a>
<a href="#stories"><li>Berättelser</li></a>
<a href="#nyheter"><li>Nyheter om projektet</li></a>
<a href="#englishinfo"><li>Info in English</li></a>
</ul>
</div>
</Modal>
);
}
}
export default withStyles(s)(Menu);回答 1
Stack Overflow用户
发布于 2016-11-11 00:35:07
ModalTrigger已弃用。而且，您似乎已经开始研究另一种解决方案:使用组件状态而不是<ModalTrigger/>作为模态逻辑。这里有一个简单的例子。在documentation中可以找到有关这方面的更多信息。
const Modal = ReactBootstrap.Modal;
class Menu extends React.Component {
constructor() {
super();
this.state = { isMenuOpen: false };
this.handleOpen = this.handleOpen.bind(this);
this.handleClose = this.handleClose.bind(this);
}
handleOpen() {
this.setState({ isMenuOpen: true });
}
handleClose() {
this.setState({ isMenuOpen: false });
}
render() {
return (
<div>
<button onClick={this.handleOpen}>Trigger Menu</button>
<Modal show={this.state.isMenuOpen} onHide={this.handleClose}>
<ul>
<li>This</li>
<li>is</li>
<li>the</li>
<li>menu!</li>
</ul>
</Modal>
</div>
);
}
}
ReactDOM.render(<Menu/>, document.getElementById('View'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.5/react-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<div id="View"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40532000
复制相关文章
相似问题
腾讯云开发者
