prefácio
React se tornou uma das bibliotecas JavaScript mais populares no desenvolvimento front-end moderno. Em aplicações complexas, a transferência de dados entre diferentes componentes é particularmente crítica. Neste artigo, exploraremos uma maneira eficiente de passar dados entre componentes React usando pop-ups e recursos de componentes de ordem superior. Explicaremos em profundidade através de um cenário de negócios específico
Introdução ao cenário de negócios
Suponha que estejamos desenvolvendo um sistema de gerenciamento de projetos, uma das principais funções é iniciar a aprovação do projeto. Na página principal, os usuários veem uma lista de projetos, cada um com um botão “Enviar aprovação”. Após clicar no botão, uma caixa pop-up será exibida, permitindo ao usuário selecionar um departamento da empresa e visualizar o respectivo processo de aprovação. Neste processo, precisamos realizar a transferência dos dados da página inicial para o componente da caixa pop-up, e carregar o processo de aprovação relevante de acordo com a escolha do usuário.
código da página principal
Primeiro, temos um ProjectManagementcomponente de página principal chamado . Neste componente, adicionamos um botão "Iniciar aprovação" para cada projeto. Clicar neste botão acionará o método para handleGoApprovepassar os dados do projeto para o componente pop-up. Clicar no botão confirmar no componente pop-up acionará handleApproveOko método para chame a interface de back-end.
// 主页面代码
import React, {
Component } from "react";
import {
Table,
Form,
Button,
Input,
Collapse,
Pagination,
Divider,
message,
Modal,
} from "antd";
// ...
const {
Column } = Table;
const {
Panel } = Collapse;
const {
confirm } = Modal;
class ProjectManagement extends Component {
// ... 其他状态和方法 ...
// 处理发起审批按钮点击
handleGoApprove = (row) => {
// 更新状态，传递数据到弹框组件
this.setState({
currentRowData: Object.assign({
}, row),
approveModalFormVisible: true,
// ...
});
};
// 处理子组件确认提交按钮
handleApproveOk = (_) => {
// 获取子组件的props
const {
form } = this.approveItemFormRef.props;
form.validateFields((err, fieldsValue) => {
if (err) {
return;
}
// 获取API所需的参数
const projectId = form.getFieldValue("projectId");
const selectedCompany = form.getFieldValue("departCompany");
const values = {
...fieldsValue,
projectId: projectId,
selectedCompany: selectedCompany,
};
// 调用API
this.setState({
approveModalFormLoading: true });
toApprove(values)
.then((response) => {
form.resetFields();
this.setState({
approveModalFormVisible: false, approveModalFormLoading: false });
message.success("发起成功!");
this.fetchData();
})
.catch((e) => {
message.success("发起失败,请重试!");
this.setState({
approveModalFormLoading: false });
});
});
};
// ... 其他渲染逻辑 ...
render() {
return (
<div className="app-container">
{
/* 表格代码 */}
<Table>
{
/* 列定义 */}
<Column
render={
(text, row) => (
<Button
onClick={
() => this.handleGoApprove(row)}
>
发起立项审批
</Button>
)}
/>
</Table>
{
/* 弹框 */}
<Modal
title="发起立项审批"
visible={
this.state.approveModalFormVisible}
onCancel={
this.handleCancel}
onOk={
this.handleApproveOk}
// ...
>
{
/* 弹框内容 */}
<ApproveModal
currentRowData={
this.state.currentRowData}
wrappedComponentRef={
(formRef) => (this.approveItemFormRef = formRef)}
// ...
/>
</Modal>
</div>
);
}
}
Código do componente do quadro pop-up
A seguir, vamos dar uma olhada no código do componente de diálogo ApproveModal. No componentWillMountciclo de vida, obtemos os dados do item de acordo com o repassado currentRowDatae inicializamos as informações relevantes no estado. Em seguida, getDepartLevelByUseras informações em nível de departamento são obtidas por meio do método e os dados são armazenados no estado.
class ApproveModal extends Component {
state = {
userParentList: [],
departCompanyList: [],
selectedCompany: '', // 用于存储选中的公司
projectId: '',
}
componentWillMount() {
const {
currentRowData } = this.props;
const projectId = currentRowData.id;
const departmentManager = currentRowData.departmentManager;
// 根据当前行数据初始化状态
this.setState({
projectId: projectId,
});
// 获取部门层级信息并初始化状态
this.getDepartLevelByUser(departmentManager);
}
getDepartLevelByUser = (value) => {
// 使用API获取部门层级数据
getDepartLevelByUser(value).then((response) => {
const {
data } = response.data;
this.setState(
{
departCompanyList: data,
},
() => {
// 在状态更新后，检查 departCompanyList 是否有记录
if (this.state.departCompanyList.length > 0) {
// 默认填充第一条记录的值
const selectedCompany = this.state.departCompanyList[0].company;
this.setState(
{
selectedCompany: selectedCompany,
},
() => {
// 在设置 selectedCompany 后触发 onChange 事件
this.handleDepartCompanySelect(selectedCompany);
}
);
}
}
);
});
}
// ... 其他逻辑 ...
render() {
// 使用 getFieldDecorator 处理表单
const {
getFieldDecorator } = this.props.form;
const {
projectId, selectedCompany, userParentList } = this.state;
return (
<div>
<Form>
<Form.Item>
{
getFieldDecorator("departCompany", {
initialValue: selectedCompany,
// ...
})(
<Select onChange={
this.handleDepartCompanySelect} value={
selectedCompany}>
{
/* 渲染部门选项 */}
{
departCompanyList.map((item) => (
<Select.Option key={
item.company} value={
item.company}>
{
item.company}
</Select.Option>
))}
</Select>
)}
</Form.Item>
{
/* 审批流程 */}
<div style={
{
display: this.state.selectedCompany ? 'flex' : 'none', alignItems: 'flex-start' }}>
<div style={
{
marginRight: '20px' }}>
<h4 style={
{
margin: 0 }}>【审批流程】:</h4>
</div>
<Timeline style={
{
flex: 1 }}>
{
userParentList && userParentList.length > 0 && userParentList.map((user, index) => (
<Timeline.Item key={
user.key} color="green">
<div>
{
user.value}
</div>
</Timeline.Item>
))}
</Timeline>
</div>
</Form>
</div>
);
}
}
// 利用高阶组件（HOC）封装表单
const WrappedApproveModal = Form.create()(ApproveModal);
export default WrappedApproveModal;
Princípio de transferência de dados
currentRowDataNeste exemplo, os dados são passados através do estado da página principal para a propriedade do componente popup . O componente bullet box pode ser inicializado de acordo com os dados recebidos e carregar o processo de aprovação correspondente de acordo com a escolha do usuário. Além disso, o componente pop-up também utiliza componentes de ordem superior Form.create()para processar formulários, o que facilita o gerenciamento dos valores e estados dos campos do formulário.
Resumir
Por meio deste cenário de negócios real, discutimos em profundidade como usar o bullet box e os recursos dos componentes de alta ordem para realizar a transferência de dados entre os componentes do React. Transferimos os dados da página principal para o componente da caixa pop-up e depois para o campo do formulário, e analisamos gradativamente o processo de transferência de dados e gerenciamento de estado. Esse padrão pode ajudá-lo a organizar melhor seu código, permitir o fluxo de dados e melhorar a capacidade de manutenção e escalabilidade do seu projeto. O método dentro do componente de diálogo renderé usado getFieldDecoratorpara manipular o formulário, o que nos permite gerenciar facilmente o valor e o estado do campo do formulário.
Por meio do código e da explicação acima, entendemos uma forma típica de transferência de dados entre componentes e como usar os recursos bullet box e componentes de alta ordem no React para realizar essa forma. Esse método pode ser aplicado em muitos cenários, ajudando-nos a organizar melhor o código, lidar com o fluxo de dados e construir aplicativos melhores.
Se você encontrar problemas semelhantes em projetos reais, você pode tentar este método para lidar com a transferência de dados entre componentes. Espero que este artigo tenha sido útil para você e, se você tiver alguma dúvida ou opinião, fique à vontade para deixar um comentário abaixo. Obrigado por ler!
Conclusão: Somente a responsabilidade pode tornar nossa felicidade espessa