React项目中点击路由组件内按钮如何修改antd Layout的Footer内容？

你这个场景属于典型的父子组件通信需求，直接通过props传递回调函数即可实现，改动量很小：

1. 修改WebSiteLayout.js #

首先给函数组件添加状态存储Footer的显示值，同时将更新状态的方法传递给路由子组件：

import React, { useState } from "react";
// 原有import内容保持不变即可

const WebSiteLayout = ({ location, row }) => {
    // 新增state存储Footer显示内容，默认值为原来的文本
    const [footerText, setFooterText] = useState('Display Numbers Field Value')
    // 注意：你原有代码中使用的collapsed变量未定义，自行补充相关控制逻辑即可
    const [collapsed, setCollapsed] = useState(false)

    return (
        <Layout>
          {/* 原有Sider、Menu等代码全部保持不变 */}
          <Layout className="site-layout" hasSider={true} style={{ height: "100vh" }}>
            <Content
              className="site-layout-background"
              style={{
                padding: 24,
                height: '80px',
                minHeight: 280,
              }}
            >
              <Switch>
                {/* 把原来的component写法改成render属性写法，传递更新Footer的方法 */}
                <AuthenticatedRoute 
                  path='/numbers' 
                  render={(routeProps) => <NumbersList {...routeProps} updateFooter={setFooterText} />} 
                />
              </Switch>
                <Footer style={{ position: "fixed", bottom: "0px", right: "0px", background: "#c2c2c2", padding: "15px 25px" }}>
                  {/* 直接渲染state中存储的Footer文本 */}
                  {footerText}
                </Footer>
            </Content>
          </Layout>
        </Layout>
               );
};
export default withRouter(WebSiteLayout)

2. 修改NumberList.js #

点击按钮时调用父组件传递过来的更新方法，把输入框的当前值传过去即可：

import React, {Component} from 'react';
import 'antd/dist/antd.css';
import { withRouter } from "react-router";
import { Button, Input } from 'antd';

class NumbersList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value:''
    }
  }

  sendValueToFooter = () => {
      // 调用父组件传过来的更新方法，把输入值传递到父组件
      this.props.updateFooter(this.state.value)
  }
  render() {
    return (
      <div class="container-fluid">
              <h4 class="page-title float-left">Numbers</h4>
              <Input placeholder="Basic usage" value={this.state.value} onChange={(e)=>{this.setState({value : e.target.value})}}/>
                <br></br>
                <Button type="primary" onClick={this.sendValueToFooter}>
                  Click Here To Send Value On Footer
                </Button>

       </div>
    )
  }
}

export default withRouter(NumbersList)

补充说明 #

如果你的自定义AuthenticatedRoute不支持render属性，或者后续项目有大量跨层级组件通信的需求，也可以选择用React Context、Redux等状态管理方案实现，但当前简单场景下用props回调是成本最低的实现方式。

内容的提问来源于stack exchange，提问作者kevin ladani