javascript - 如何只将一个组件的功能传递给另一个组件而不渲染它
问题描述
React 新手,我想让一个组件的按钮通过调用另一个组件中的函数来打开一个通用模式。最终,我希望导航栏有一个按钮,一个引导卡有一个按钮,当点击它时,它会在单独的组件中打开一个模式。我尝试使用 ref={} 但我不明白我希望他们是另一种方式。这是我希望 ClickButton.js 中的按钮打开 Header.js 中的模态的简单代码。当我带来 ClickButton 父级时,我必须添加它,即添加两个按钮。如何仅获取 CLickButton.js 的按钮来访问 Headerjs 中的切换功能。不会导致两个按钮呈现如下所示?
import React, { Component } from 'react';
import {Button} from 'reactstrap';
import Header from './Header';
class ClickButton extends Component {
constructor(props) {
super(props);
this.state = {
};
}
onClicker = (props) => {
this.props.toggleModal();
}
render( ) {
return (
<div>
<Button onClick={this.onClicker} color="primary">OtherComponentButton</Button>
</div>
);
}
}
export default ClickButton;
这是模态
import React, { Component } from "react";
import { Button, Modal, ModalBody, Form, FormGroup,Label,Input} from "reactstrap";
import ClickButton from './ClickButton';
class Header extends Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
}
toggle = () => {
this.setState({
modal: !this.state.modal
});
}
render() {
return (
<div>
<Modal isOpen={this.state.modal}>
<ModalBody>
<Form>
<FormGroup>
<Label for="exampleEmail">Name</Label>
<Input type="email" name="email" id="exampleEmail" placeholder="Enter Name" />
</FormGroup>
</Form>
</ModalBody>
<Button onClick={this.toggle}>Close</Button>
</Modal>
<Button onClick={this.toggle}>ModalComponent</Button>
<ClickButton toggleModal={this.toggle} />
</div>
);
}
}
export default Header;
这是显示两个按钮的图像。我如何让它只显示一次 CLickButton 按钮。
解决方案
要访问类方法中的道具,您可能需要将类方法显式绑定到实例。
render( ) {
return (
<div>
<Button onClick={this.onClicker.bind(this)} color="primary">OtherComponentButton</Button>
</div>
);
}
或者你也可以直接调用 prop 方法
render( ) {
return (
<div>
<Button onClick={this.props.toggleModal} color="primary">OtherComponentButton</Button>
</div>
);
}
推荐阅读
- php - 结帐前重定向到登录(我的帐户)并在登录后返回到结帐 - Woocommerce
- firebase - Firebase 实时数据库和存储位置对这些服务的速度有多大影响?我可以更改位置吗?
- javascript - Firebase Firestore 数据不一致
- javascript - 如何将元素移动到新行?html/css
- python - pygame - 恒定帧速率
- python - 行为:错误:format=cucumber_json:PrettyCucumberJSONFormatter 未知
- github - 如何在 atom 上通过 REPL 运行 Julia
- javascript - 尝试在下一个 js 页面中循环数据时(使用 getStaticProps),为什么我会变得未定义?
- python-3.8 - 关于 ipaddress 的 pylint 警告
- r - 创建 2 个变量,它们为我提供 var1_A 到 var1_E 中的值,对应于 var2_A 到 var2_E 中的最高值