如何在react js（props）的主要组件中调用本地组件function

Question

//local component!!!!!
import { useState, useEffect } from "react";
import axios from "axios";
import React from "react";

const Getjokes = () => {
  const [joke, setjoke] = useState([]);
  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();
  }, []);
  const j1 = joke[1] ? joke[1].joke : null;
  return (
    <>
      <button onClick={dadjokes}></button>
      <p>{j1}</p>
    </>
  );
};
export default Getjokes;
//Main component!!!!!!!!!
import React from "react";
import Getjokes from "./Getjokes";
const App = () => {
  return (
    <div>
      <Getjokes />
    </div>
  );
};

export default App;

在本地组件中，我有一个按钮，每次点击时都会从 api 获取一个新笑话。我想在主组件中返回具有相同功能的这个按钮（在 api 区域没有问题我只想知道我将如何在这里使用道具或者可以使用任何其他方法来解决它。

Answer 1

你的问题需要澄清。 渲染 app.js 后，您可以在屏幕上看到本地组件的按钮。

请澄清一下的意思

我只想得到承认

Answer 2

尝试这个....

/local component!!!!!
import { useState, useEffect } from "react";
import axios from "axios";
import React from "react";

const Getjokes = (props) => {
  
  return (
    <>
      
      <p>{props.j1}</p>
      {props.children}

    </>
  );
};
export default Getjokes;
//Main component!!!!!!!!!
import React from "react";
import Getjokes from "./Getjokes";
const App = () => {
 const [joke, setjoke] = useState([]);
  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();
  }, []);
  const j1 = joke[1] ? joke[1].joke : null;
  
  return (
    <div>
      <Getjokes j1 = {j1}>
         <button onClick={dadjokes}>getJoke</button>
      </Getjokes>
    </div>
  );
};

export default App;