Question

我是ReactJS的新手，我在渲染ModalTrigger时遇到问题，该ModalTrigger旨在显示/隐藏单独组件中的模态。我使用的样板是react-starter-kit。

返回的错误是：“不变违规：元素类型无效：期望一个字符串（对于内置组件）或类/函数（对于复合组件）但得到：undefined。检查{{1的渲染方法}}“。

似乎不太可能在返回之前将组件转换为字符串.....这是代码：

MenuButton

然后是模态：

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

Answer 1

ModalTrigger已弃用。而且您似乎已经开始研究另一种解决方案：使用组件状态而不是<ModalTrigger/>作为模态逻辑。这是一个简单的例子。请在documentation中了解详情。

＆＃13;

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

＆＃13;

<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>

＆＃13;

无法渲染react-bootstrap ModalTrigger

1 个答案: