Вы можете отобразить окно сообщения внутри вашего MyComponent
.При позиционировании fixed
никто не видит, где в дереве документа был определен блок.Таким образом вы избегаете ссылок на узлы или механизма глобального состояния, такого как Redux.
Вы можете предоставить обработчики щелчков для MessageBox
в качестве реквизитов, но может быть даже лучше предоставить buttons
рендер prop в компоненте MessageBox
, как показано ниже.Таким образом, MessageBox
полностью контролирует рендеринг, а MyComponent
полностью контролирует функциональность.
import MessageBox from './MessageBox'
class MyComponent extends React.Component {
onDeleteButtonClick(data) => {
this.setState({ data, messageBoxOpen: true })
}
onMessageOkClick() => {
deleteThing(this.state.data)
this.setState({ messageBoxOpen: false })
}
render() {
return (
// ...content...
<button onClick={this.onDeleteButtonClick}>delete</button>
// more content
<MessageBox
open={this.state.messageBoxOpen}
text="Question?"
buttons={(Button) => [
<Button text="Ok" onClick={this.onMessageOkClick} />,
<Button text="Cancel" onClick={this.setState({ messageBoxOpen: false })} />
]}
/>
)
}
}
// MessageBox.jsx
const Button = ({ text, onClick }) => { /* ... */ }
const MessageBox = ({ open, text, buttons }) => open ? (
<div>
{text}
{buttons(Button)}
</div>
) : null