无法将 react-modal 呈现为可重用组件

Question

我有一个带有餐点列表的应用程序，点击餐点应该会在屏幕上出现一个模式，其中包含有关该餐点的更多信息。

所以我尝试使用 react-modal 包将基本模式编码为可重用组件。

然而，当我尝试 'activate' 模式时，它不起作用。 openModal 方法确实被触发，但模态框没有显示在屏幕上。

App.js:

import React from 'react';

import MealCard from './MealCard';
import MealModal from './MealModal';


export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      modalIsOpen: false
    }
    this.openModal = this.openModal.bind(this);

  };

  openModal() {
    this.setState({modalIsOpen: true});
    console.log(this.state.modalIsOpen);
  }

  render() {
    return (
      <div>
        <div className="app-wrapper" style={{display: 'flex'}}>
          <div className="container">
            <div className="row">
              {[...Array(20)].map((x, i) =>
                  <div className="col-sm-6 col-xs-12 " key={i} onClick={this.openModal}>
                    <MealCard />
                  </div>
                )}
          </div>
        </div>
      </div>
      <MealModal isOpen={this.state.modalIsOpen}/>
    </div>
    );
  }
}

MealModal.js

import React from 'react';
import Modal from 'react-modal';

const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
};

Modal.setAppElement('#app')

export default class MealModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modalId: 0,
      modalIsOpen: false
    };

    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  componentWillMount() {
    this.setState({modalId: 3})
  }

  openModal() {
    this.setState({modalIsOpen: true});
  }

  closeModal() {
    this.setState({modalIsOpen: false});
  }
  render() {
    return (
      <Modal
        isOpen={this.props.modalIsOpen}
        onRequestClose={this.closeModal}
        style={customStyles}
        contentLabel="Meal Modal"
      >
        <div className="modal-wrapper">
          <div className="container text-center">
            <h1>Hello</h1>
            <h2>ID of this modal is {this.state.modalId}</h2>
            <h3>This is an awesome modal.</h3>
            <button onClick={this.closeModal}>close</button>
          </div>
        </div>
      </Modal>
    )
  }
}

Answer 1

您将 isOpen 作为道具传递并在 MealModal 组件中使用 modalIsOpen（道具）。

如评论中所述，您可以直接使用isOpen={this.props.isOpen}。使用两种状态来达到相同目的是没有意义的，一种是 App 组件中的 modalIsOpen，另一种是 MealModel 组件中的 modalIsOpen

无法将 react-modal 呈现为可重用组件

can't render react-modal as reusable component

javascript

reactjs

react-modal