У меня есть два js-файла с одинаковыми компонентами, вызывающие одну и ту же функцию, но с разным содержимым. Таким образом, в основном, функция идет по нажатию кнопки «Открыть модуль». FileA откроется. То же самое относится и к кнопке B. Как я могу переписать эти два компонента или, по крайней мере, переписать мою функцию, чтобы два компонента не были затронуты, когда они вызывают одну и ту же функцию?
Это FileA. js
import React from 'react'
const moduletext = 'TEXT1'
const ModuleText= ({ text }) => {
return (
<div className="this_container">
<span>{text}</span>
<span role="button" onClick={props.close}>Close</span>
</div>
)
}
function ModuleA(props) {
return (
<div className="_this_container" style={props.show}>
<ModuleText text={moduletext} />
</div>
)
}
export default ModuleA
Это FileB.js
import React from 'react'
const moduletext = 'TEXT2'
const ModuleText= ({ text }) => {
return (
<div className="this_container">
<span>{text}</span>
<span role="button" onClick={props.close}>Close</span>
</div>
)
}
function ModuleB(props) {
return (
<div className="_this_container" style={props.show}>
<ModuleText text={moduletext} />
</div>
)
}
export default ModuleB
Тогда мой основной компонент:
import ModuleA from './FileA'
import ModuleB from './FileB'
class MainComponent extends Component {
constructor() {
super()
this.state = {
show: { display: 'none' }
}
this.open = this.open.bind(this);
this.close = this.close.bind(this);
}
open(){
this.setState({show: {display: 'block'}})
}
close(){
this.setState({show: {display: 'none'}})
}
render(){
return(
<div>
<span role="button" onClick={this.open}>Open Module A</span>
<span role="button" onClick={this.open}>Open Module B</span>
<ModuleA show={this.state.show} close={this.close}/>
<ModuleB show={this.state.show} close={this.close}/>
</div>
)
}
}