Блог

Мне нужно передать параметры из дочернего компонента элементам узла из родительских реквизитов.

Компонент страницы

 export default function Categories() {   const dispatch = useDispatch();

  useEffect(() => {
    dispatch(loaderAction(false));

    return () => dispatch(loaderAction(true));   }, [dispatch]);

  function handleClick(params) {
    alert();   }

  function handleEditClick(params) {
    alert();   }

  return (
    <div className="categories-body">
      <div className="categories-header">
        <div className="left">
          <h2>{t('[categories]')}</h2>
        </div>
        <div className="right">
          <button className="button orange">{t('[addNewCategory]')}</button>
          <LanguageSettings name="categoriesLanguageSetting" />
        </div>
      </div>

      // Table component imported
      <Table
        action={
          <>
            //node elements
            <button onClick={handleClick}>save</button>
            <button onClick={handleEditClick}>edit</button>
          </>
        }
      />
    </div>   );  }
  

Компонент таблицы

 export default function Table({action}) {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>date</th>
          <th>key</th>
          <th>category</th>
          <th>actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>{action}</td> //pass parameter to node props 
        </tr>
      </tbody>
    </table>
  );
}
  

Я передал две кнопки компоненту таблицы, и мне нужно передать, например, идентификатор строки на кнопку onClick

Просто передайте функцию… не компонент

 const handleClick = id => alert();

<Table  action={handleClick} />

function Table({action}) {
  return (
    <table>
      ...
      <td><button onClick={() => action(`someId`)}>action</button></td>
    </table>
  );
}
  

Или, если вы настаиваете, передайте функциональный компонент, а не элемент:

 actions={({id}) =>  <button onClick={() => handleClick(id)}>save</button>}

// Usage
function Table({action}) {
  const Action = props.action;
  return (
    <table>
      ...
      <td><Action id="Some id"/></td>
    </table>
  );
}
  

в вашем компоненте страницы просто передайте действия как функцию render prop

 function handleClick(params) {
     console.log(params);
    alert();   
  
  }

   function handleEditClick(params) {
    console.log(params);
    alert();   
  }
  
  return (
    <Table
      action={ (params) => (
        <>
          <button onClick={() => handleClick(params)}>save</button>
          <button onClick={() => handleEditClick(params)}>edit</button>
        </>
        )     
      }
    />
  )
  

и в компоненте таблицы вызовите эту функцию с желаемыми параметрами,
при таком подходе вы можете расширить функцию render prop для предоставления нескольких параметров

 function Table({action}) {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>date</th>
          <th>key</th>
          <th>category</th>
          <th>actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>{action(23)}</td>  // pass params here
        </tr>
      </tbody>
    </table>
  );
}