如何在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;