Я пытаюсь создать тест, который использует react-modal
для предоставления подсказок.Мне понадобится несколько модалов внутри викторины.Я новичок в React, поэтому вполне возможно, что я делаю простую ошибку.
Я не уверен, что это имеет значение, но я построил это, используя create-react-app
.
Мой App.js выглядит следующим образом:
import React, { Component } from 'react';
import HintModal from './hintModal';
import Modal from 'react-modal';
import './App.css';
Modal.setAppElement('#root');
class App extends Component {
state = {
modalIsOpen: false,
hint: ''
};
openModal = (hint) => {
this.setState({ modalIsOpen: true, hint: hint });
}
closeModal = () => {
this.setState({ modalIsOpen: false, hint: '' });
}
render() {
return (
<React.Fragment>
<h1>Modal Test</h1>
<h2>First Modal</h2>
<HintModal
modalIsOpen={this.state.modalIsOpen}
openModal={this.openModal}
closeModal={this.closeModal}
hint="mango"
/>
<hr />
<h2>Second Modal</h2>
<HintModal
modalIsOpen={this.state.modalIsOpen}
openModal={this.openModal}
closeModal={this.closeModal}
hint="banana"
/>
</React.Fragment>
);
}
}
export default App;
hintModal.jsx выглядит так:
import React, { Component } from 'react';
import Modal from 'react-modal';
const HintModal = (props) => {
const {openModal, modalIsOpen, closeModal, hint} = props;
return (
<React.Fragment>
<button onClick={ () => openModal(hint) }>Open Modal</button>
<Modal
isOpen={modalIsOpen}
onRequestClose={closeModal}
contentLabel="Example Modal"
>
<h2>Hint</h2>
<p>{hint}</p>
<button onClick={closeModal}>Close</button>
</Modal>
<p>We should see: {hint}</p>
</React.Fragment>
);
};
export default HintModal;
Вот проблема: мне нужно изменить содержимое модального режима на основе hint
реквизит передан HintModal.Когда я вывожу hint
извне <Modal>
, он ведет себя, как и ожидалось, отображая значение реквизита.Но когда я вывожу hint
в <Modal>
, он возвращает «банан» (значение опоры hint
для второго экземпляра HintModal), когда активирован любой из модальных режимов.
Любая помощь будет принята с благодарностью!