如何将事件从父级传递给子级以与功能组件发生反应？

Question

I have two buttons in my Parent component AddRow and DeleteRow buttons if i click on addRow button it will add an empty row in grid and if i click deleteRow button it will delete selected rows from grid. I have added two functions for adding row to grid and removing record from grid in my child component. How to call these functions from parent component button click events. Similar sample code given below.

i have used lift up state to parent component it is working is any other way to do it because i need to move entire child component code to parent component and there are 4 child components lifting the all the child code to parent becomes huge code in parent component what is the react way doing things in this situation.

import { render } from 'react-dom';
import React, { useState } from 'react';

const App = () => {
  return (
    <Parent />
  );
};

const Parent = () =>{ 
  return (
  <div>
    <h1>Parent Component</h1>
    <div id="newElements"></div>
    <input type="button" value="Add New Element" onClick={} />
    <input type="button" value="Clear Elements" onClick={} />  
  <Child />
  </div>
)

};

const Child = () =>{ 
   function addElement()
  {
    //this function will add row to grid.
    var node = document.createElement("h1");  
    node.innerHTML="New Element";
    document.getElementById('newElements').appendChild(node); 
  }
  function clearElement()
  {
    //this function will remove row from grid
    document.getElementById('newElements').innerHTML=""; 
  }
  return (
  <div>
    <h1>Child Component</h1>
    //here the grid will be there in my actual code 
    <div id="newElements"></div>
  </div>)
};
render(<App />, document.getElementById('root'));

I need to call addElement() function when click on parent components AddNewElement button.

Answer 1

You should lift your state up . Move the functions and state to parent and pass it down via props . Remember, React is all about data flowing down the component's tree, never up.

import { render } from 'react-dom';
import React, { useState } from 'react';

const App = () => {
  return (
    <Parent />
  );
};

const Parent = () =>{ 
    const addElement = () =>
    {
      //this function will add row to grid.
      var node = document.createElement("h1");  
      node.innerHTML="New Element";
      document.getElementById('newElements').appendChild(node); 
    }
    const clearElement = () =>
    {
      //this function will remove row from grid
      document.getElementById('newElements').innerHTML=""; 
    }
  return (
  <div>
    <h1>Parent Component</h1>
    <div id="newElements"></div>
    <input type="button" value="Add New Element" onClick={} />
    <input type="button" value="Clear Elements" onClick={} />  
     <Child add={addElement} clear={clearElement}/>
  </div>
)

};

const Child = ({add, clear}) =>{ 

  return (
  <div>
    <h1>Child Component</h1>
    <button onClick={add}>Add</button>
    <button onClick={clear}>Clear</button>
    <div id="newElements"></div>
  </div>)
};
render(<App />, document.getElementById('root'));

Answer 2

If I was to say what is THE react way to do it, it would be something like this:

Parent component:

export default function App() {
  const [rows, setRows] = React.useState([]);

  const addElement = () => {
    setRows([...rows, "New Element"]);
  };

  const clearElement = () => {
    setRows((prevState) => {
      const arr = [...prevState];
      arr.splice(-1);
      return arr;
    });
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <input type="button" value="Add New Element" onClick={addElement} />
      <input type="button" value="Clear Element" onClick={clearElement} />
      <Child rows={rows} />
    </div>
  );
}

Child component:

const Child = (props) => {
  return (
    <div>
      <h1>Child Component</h1>
      {props.rows.map((row, index) => {
        return <h1 key={index}>{row}</h1>;
      })}
    </div>
  );
};

One of the main points in using react is to skip dynamic rendering to some arbitrary point in the application (like id="uniqueIdHere" ), doesn't matter if you use jQuery or new JS syntax to target it and then mutate JS. If React is used properly, it will make sure to only re-render changing nodes (shadow DOM) and will keep track of the state (how many nodes there should be at any point in time) appropriately.

As you can see the logic to render new nodes or remove them, isn't really that big and scary when using react in a way that it was built to be used.

Here's a sandbox to play around, happy to answer any questions you have about the code I wrote.