React 将参数从子组件传递给节点元素

Posted 2023-02-23

【中文标题】React 将参数从子组件传递给节点元素

【英文标题】：React pass params to the node elements from child component

【发布时间】：2021-02-09 12:10:51

【问题描述】：

我需要将子组件的参数传递给父道具的节点元素。

页面组件

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>
  );

我已将两个按钮传递给 Table 组件，并且需要将例如行 id 传递给按钮 onClick

【参考方案1】：

在您的页面组件中，只需将 actions 属性作为 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>
  );

【参考方案2】：

只传递函数...而不是组件

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>
  );