javascript - 重用不同内容的相同功能
问题描述
我有两个具有相同组件的 js 文件,调用相同的函数,但内容不同。所以基本上,当单击打开模块 A 按钮时,该功能将打开,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>
)
}
}
解决方案
我认为你不需要fileA.js
and fileB.js
。相反,您可以为多个模块设置多个单独的状态。
class App extends Component {
constructor() {
super();
this.state = {
showA: { display: 'none' },
showB: { display: 'none' }
}
this.open = this.open.bind(this);
this.close = this.close.bind(this);
}
open(type){
//Open the module based on passed variable
if(type === 'A'){
this.setState({showA: {display: 'block'}})
}else{
this.setState({showB: {display: 'block'}})
}
}
close(type){
//Close the variable based on passed variable
if(type === 'A'){
this.setState({showA: {display: 'none'}})
}else{
this.setState({showB: {display: 'none'}})
}
}
render() {
return (
<div>
<span role="button" onClick={() => this.open('A')}>Open Module A</span> //Pass a variable here to open specific module
<span role="button" onClick={() => this.open('B')}>Open Module B</span> //Pass a variable here to open specific module
<Module show={this.state.showA} close={this.close} module="A" text="TEXT1"/> //You need to pass multiple props here as required by your module
<Module show={this.state.showB} close={this.close} module="B" text="TEXT2"/> //You need to pass multiple props here as required by your module
</div>
);
}
}
Youe模块可以是这个,
const ModuleText= ({ text, close, module }) => {
return (
<div className="this_container">
<span>{text}</span>
<span role="button" onClick={() => close(module)}>Close</span> //Pass the variable to close the specific module
</div>
)
}
function Module(props) {
return (
<div className="_this_container" style={props.show}>
<ModuleText text={props.text} close={props.close} module={props.module}/> //Pass down the props to your ModuleText component
</div>
)
}
推荐阅读
- json - VUE将JSON从点击函数传递到HTML模板
- javascript - 选择选择选项Javascript DOM后自动填充输入
- asp.net - 应用程序突然挂起(等待进入 .NET 锁)
- c# - 从共享 ArrayPool 中租用和返回 C# 中的多维数组的正确方法?
- botframework - 如何添加 Http 请求超时?
- .net - 无法找到 .NET Core SDK
- c++ - Qt3D - 在多视口中添加边框
- android-gradle-plugin - 如何将参数从 Gradle 插件传递给 JUnit4 测试运行器?
- sql - SQL 命令 if sum = 0 by criteria
- doctrine - Doctrine querybuilder 添加子查询更改别名