function TestFather() { const [on, setOn] = useState(false) function handleChildClick(value) { console.log(value) if (value === true) { setOn(true) } else { setOn(false) } } function A() { return <div>1</div> } function B() { return <div>2</div> } return ( <div> <div>{on ? <A></A> : <B></B>}</div> <TestChild onButtonClick={handleChildClick} /> </div> ) } export default TestFather class TestChild extends React.Component { handleButtonClick = () => { this.props.onButtonClick(true) } render() { return <button onClick={this.handleButtonClick}>Click me</button> } } export default TestChild 报错

根据代码的提示，该代码中导出了两个默认的组件 `TestFather` 和 `TestChild`，但是只能导出一个默认的组件。因此，需要将其中一个组件的导出方式改为命名导出，比如将 `TestChild` 的导出方式从 `export default` 改为 `export`。

另外，该代码中使用了 React 的类组件，但是没有导入 React 模块。因此，需要在文件开头添加 `import React from 'react';` 来导入 React 模块。

下面是修改后的代码示例：

import React, { useState } from 'react';
import TestChild from './TestChild'; // 假设 TestChild 组件已经定义

function TestFather() {
  const [on, setOn] = useState(false);

  function handleChildClick(value) {
    console.log(value);
    if (value === true) {
      setOn(true);
    } else {
      setOn(false);
    }
  }

  function A() {
    return <div>1</div>;
  }

  function B() {
    return <div>2</div>;
  }

  return (
    <div>
      <div>{on ? <A /> : <B />}</div>
      <TestChild onButtonClick={handleChildClick} />
    </div>
  );
}

export default TestFather;

class TestChild extends React.Component {
  handleButtonClick = () => {
    this.props.onButtonClick(true);
  };

  render() {
    return <button onClick={this.handleButtonClick}>Click me</button>;
  }
}

export { TestChild };