如何使子组件能够更改父组件的appbar？

要使子组件能够更改父组件的appbar，可以通过以下步骤实现：

在父组件中定义一个状态（state），用于控制appbar的显示内容。例如，可以使用一个布尔值来表示是否显示默认的appbar内容。
在父组件中创建一个方法（函数），用于更新appbar的显示内容。这个方法将作为props传递给子组件。
在子组件中，通过props接收父组件传递的方法，并在需要更改appbar时调用该方法。
在子组件中，通过props接收父组件传递的状态，并根据状态的值来决定是否显示默认的appbar内容。

下面是一个示例代码：

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [showDefaultAppBar, setShowDefaultAppBar] = useState(true);

  const updateAppBar = () => {
    setShowDefaultAppBar(!showDefaultAppBar);
  };

  return (
    <div>
      <ChildComponent updateAppBar={updateAppBar} showDefaultAppBar={showDefaultAppBar} />
      {showDefaultAppBar ? <AppBar /> : <CustomAppBar />}
    </div>
  );
};

// 子组件
import React from 'react';

const ChildComponent = ({ updateAppBar, showDefaultAppBar }) => {
  const handleClick = () => {
    updateAppBar();
  };

  return (
    <button onClick={handleClick}>
      {showDefaultAppBar ? 'Show Custom AppBar' : 'Show Default AppBar'}
    </button>
  );
};

在上面的示例中，父组件通过useState来定义showDefaultAppBar状态，并通过updateAppBar方法来更新该状态。子组件通过props接收updateAppBar和showDefaultAppBar，并在按钮点击事件中调用updateAppBar方法来更新父组件的状态。

根据showDefaultAppBar的值，父组件决定显示默认的appbar内容还是自定义的appbar内容。

这样，当子组件中的按钮被点击时，父组件的appbar将会根据状态的改变而更新。