时间戳

首页 > 解决方案 > 当我尝试做反应弹出示例时，它不起作用

reactjs - 当我尝试做反应弹出示例时，它不起作用

问题描述

我正在尝试做这个反应弹出的例子，但它似乎不起作用。

https://github.com/JakeGinnivan/react-popout#readme

示例在底部。

import React from "react"
import Popout from "react-popout"

class PopupLogin extends React.Component {
  constructor(props) {
    super(props);
    this.popout = this.popout.bind(this);
    this.popoutClosed = this.popoutClosed.bind(this);
    this.state = { isPoppedOut: false };
  }

  popout() {
    this.setState({isPoppedOut: true});
  }

  popoutClosed() {
    this.setState({isPoppedOut: false});
  }

  render() {
    if (this.state.isPoppedOut) {
      return (
        <Popout title='Window title' onClosing={this.popoutClosed}>
          <div>Popped out content!</div>
        </Popout>
      );
    } else {
      var popout = <span onClick={this.popout} className="buttonGlyphicon glyphicon glyphicon-export"></span>
      return (
        <div>
          <strong>Section {popout}</strong>
          <div>Inline content</div>
        </div>
      );
    }
  }
}
export default PopupLogin

这应该看起来像http://jake.ginnivan.net/react-popout/这个。但在我的输出中看起来像这样。react-popout 假定输出

标签： reactjsnpm

解决方案

看起来文档中的代码缺少文本。(pop window out)在弹出窗口中添加。

import React from "react";
import Popout from "react-popout";

class PopupLogin extends React.Component {
  constructor(props) {
    super(props);
    this.popout = this.popout.bind(this);
    this.popoutClosed = this.popoutClosed.bind(this);
    this.state = { isPoppedOut: false };
  }

  popout() {
    this.setState({ isPoppedOut: true });
  }

  popoutClosed() {
    this.setState({ isPoppedOut: false });
  }

  render() {
    if (this.state.isPoppedOut) {
      return (
        <Popout title="Window title" onClosing={this.popoutClosed}>
          <div>Popped out content!</div>
        </Popout>
      );
    } else {
      var popout = (
        <span
          onClick={this.popout}
          className="buttonGlyphicon glyphicon glyphicon-export"
        >
          <a
            style={{
              textDecoration: "underline",
              color: "blue",
              cursor: "pointer"
            }}
            onClick={this.popout}
          >
            (pop window out)
          </a>
        </span>
      );
      return (
        <div>
          <strong>Section {popout}</strong>
          <div>Inline content</div>
        </div>
      );
    }
  }
}
export default PopupLogin;

推荐阅读