React类组件如何调用另一个类组件的方法实现点击更新页面标题

• incrementCount是Header类实例的成员方法，不是类的静态方法，直接通过Header.incrementCount调用不会触发任何Header实例的状态更新
• React遵循单向数据流，不允许直接跨组件调用实例方法操作状态，需要通过状态提升、props传递等符合规范的方式实现需求

1. 调整公共父组件代码 #

将count状态和更新逻辑提升到Login和Header的公共父组件中，将count传给Header，更新方法传给Login：

// 这里以Next.js页面组件为例，即你同时引用Header和Login的上层组件
import React from 'react';
import Header from '../Header.js';
import Login from '../Login.js';

export default function Page() {
  const [count, setCount] = React.useState(1);
  const incrementCount = () => setCount(prev => prev + 1);

  return (
    <>
      <Header count={count} />
      <Login incrementCount={incrementCount} />
      {/* 其余页面内容 */}
    </>
  )
}

2. 调整Header组件代码 #

移除内部state，直接从props读取count值：

import React from 'react';
import Head from 'next/head'

export default class Header extends React.Component {
  render() {
    return (
      <Head>
        <title>/{this.props.count}</title>
      </Head>
    );
  }
};

3. 调整Login组件代码 #

移除Header引入，直接使用props传递的递增方法：

import React from 'react';

class Login extends React.Component {
    render() {
        return (
            <div className='Login'>
              <button id='login' onClick={this.props.incrementCount}>increment</button>
            </div>
        );
    };
}
export default Login;

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