reactjs - React 将参数从子组件传递给节点元素
问题描述
我需要将子组件的参数传递给父道具的节点元素。
页面组件
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
解决方案
只需传递函数......而不是组件
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>
);
}
推荐阅读
- javascript - 展开特定导航节点 onload
- python - Flask Socket-IO 在没有导入的情况下运行并导致许多问题,例如 can't host='0.0.0.0'
- c# - 如何为 IGrouping 设置默认值
计数 = 0? - python - 在日志模块的上下文中窃取是什么意思
- node.js - OAuth 使用谷歌令牌访问 Jira?
- javascript - how to put the value of a key in an object in an array based on the order of another array with plain javascript
- python - XPath returns different results using Chrome Plugin and Python
- zabbix - Zabbix Trigger overview - not showing OK triggers
- asp.net-core - How to connect asp net core MVC to another asp net core SignalR server
- scala - Difference in running a spark application with sbt run or with spark-submit script