调用子组件函数

Question

So im trying to call a function from child component, but all I do ends up with an error. I've been searching for more than hour and found many solutions, but most of them are either outdated or I'm doing something wrong.

Here's my parent component and theres simple getData function in child component named Query.

const ref = useRef();
return(
     <Query ref={ref} />
     <button onClick={() => ref.current.getData()}>dasfas</button>
)

I also tried forwardRef hook, but I couldn't call it anyway.

Answer 1

Move the function to the parent component and pass data to Query component as props.

import React from "react";
import { Grid, Typography } from "@material-ui/core";

const Query = ({ query }) => {

  return (
    <Grid container item sm={12}>
      <Grid item sm={12}>
        <Typography variant="h5">Queries</Typography>
      </Grid>
      <Grid item sm={12}>
        <div id="sqlQuery" />
      </Grid>
      <Grid item sm={12}>
        <div id="treeViewBefore" />
      </Grid>
      <Grid item sm={12}>
        <div id="treeViewAfter" />
      </Grid>
    </Grid>
  );
};

export default Query;

Parent component

import React, { useState } from "react";

const Parent = () => {
  const [sqlQuery, setSqlQuery] = useState("");

  const getData = async () => {
    if (global.answercreated) {
      var response = await fetch(
        `${global.serverURL}?type=before&&property=${global.token}`
      );
      var data = await response.text();
      const jsonbefore = JSON.parse(data.replace(/'/g, '"'));

      response = await fetch(
        `${global.serverURL}?type=after&&property=${global.token}`
      );
      data = await response.text();
      const jsonafter = JSON.parse(data.replace(/'/g, '"'));

      response = await fetch(
        `${global.serverURL}?type=sqlquery&&property=${global.token}`
      );
      data = await response.text();
      const sqlQuery = data;
    }
  };

  return (
    <div>
      <Query query={sqlQuery} />
      <button onClick={() => getData()}>dasfas</button>
    </div>
  );
};

export default Parent;