React中如何通过Props在主组件调用子组件函数

核心思路是状态提升：把笑话的状态管理和API调用逻辑迁移到主组件App中，子组件Getjokes仅负责接收状态并渲染笑话内容，主组件负责放置按钮并触发API请求。

修改后的代码示例 #

主组件 App.js

import React, { useState, useEffect } from "react";
import axios from "axios";
import Getjokes from "./Getjokes";

const App = () => {
  const [joke, setjoke] = useState([]);
  
  // 保留原API调用逻辑
  const dadjokes = async () => {
    const num = Math.floor(Math.random() * 30) + 1;
    const res = await axios.get(
      `https://icanhazdadjoke.com/search?page=${num}`,
      {
        headers: { Accept: "application/json" },
      }
    );
    setjoke(res.data.results);
  };

  // 初始化加载笑话
  useEffect(() => {
    dadjokes();
  }, []);

  return (
    <div>
      {/* 按钮移至主组件，点击触发API调用 */}
      <button onClick={dadjokes}>获取新笑话</button>
      {/* 将笑话状态通过props传递给子组件 */}
      <Getjokes joke={joke} />
    </div>
  );
};

export default App;

子组件 Getjokes.js

import React from "react";

// 接收父组件传递的joke props
const Getjokes = ({ joke }) => {
  const j1 = joke[1] ? joke[1].joke : null;
  // 仅负责渲染笑话内容
  return <p>{j1}</p>;
};

export default Getjokes;

说明 #

修改后，主组件的按钮点击会触发API请求并更新状态，子组件通过props接收最新的笑话数据并渲染，完全保留了原有功能，同时实现了按钮移至主组件的需求。

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