<Month /> , должно появляться popup окно, реализацию которого я хочу вынести в новый компонент. При клике на одном из дочерних элементов компонента <Month />, этот новый компонент должен добавляться в DOM. Ниже мой компонент и попыткой использовать ReactDOM.render. И это естественно не лучшее решение, т.к. компонент полностью перерисовывается и возникают проблемы с использованием библиотеки react-reduximport React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import Popup from './Popup';
import './App.css';
class Month extends Component {
leftToggle(){
this.props.clickLeftToggle();
}
rightToggle(){
this.props.clickRightToggle();
}
popUpMonth(){
ReactDOM.render(
<Popup />,
document.getElementById('month')
);
}
render() {
let date = new Date(this.props.testStore.year, this.props.testStore.month).toLocaleString('ru', { year: 'numeric', month: 'long'});
return (
<div className="Month">
<div className='leftToggle' onClick={this.leftToggle.bind(this)}>◄</div>
<span onClick={this.popUpMonth.bind(this)} id='month'>{date}</span>
<div className='rightToggle' onClick={this.rightToggle.bind(this)}>►</div>
</div>
);
}
}
export default connect(
state => ({
testStore: state
}),
dispatch => ({
clickLeftToggle: () => {
dispatch({type: "LEFTTOGGLE", amount: 1});
},
clickRightToggle: () => {
dispatch({type: "RIGHTTOGGLE", amount: 1});
},
})
)(Month);