Создайте функцию в родительском элементе и передайте ее дочернему элементу в реквизитах:
const Parent = (props) => {
// The handler
const onCreate = /*...*/;
// some other stuff
return (
<Child ...props onCreate={onCreate}/>
);
}
Затем попросите дочерний элемент вызвать функцию с любыми необходимыми ей параметрами (кажется, что никаких в вашем примере вы не используете val
в нем, например):
return (
<MaterialTable
title={props.title}
data={val}
editable={{
onRowAdd: props.onCreate // Or `onRowAdd: () => props.onCreate(parameters, go, here)`
}}
/>
);
Примечание: нет причин копировать props.val
в val
элемент состояния внутри дочернего элемента компонент, просто используйте props.val
.
. Примечание 2: Разрушение часто удобно с подпорками:
const Child = ({val, onCreate}) => {
// ...
};
Примечание 3: ваш компонент Parent
вызывает Child
с все его реквизита, через ...props
:
return (
<Child ...props onCreate={onCreate}/>
);
Это вообще не лучше. Только передайте Child
, что ему действительно нужно, в этом случае val
и onCreate
:
return (
<Child val={props.val} onCreate={onCreate}/>
);