#javascript #reactjs
#язык JavaScript #реагирует на
Вопрос:
У меня есть простой родительский функциональный компонент (App.js) и дочерний функциональный компонент (counters.jsx), я хочу передать сигнал/поддержку от ребенка к родителю. Я хочу отправить реквизит в качестве аргумента другой функции в моем дочернем компоненте. Я могу легко вызвать родительскую функцию с помощью onClick={props.parentCallback}. но если я отправлю те же реквизиты в качестве аргумента другой функции в дочернем компоненте, я получу ошибку «Ожидал вызова назначения или функции и вместо этого увидел выражение без неиспользуемых выражений».
//This is parent Component, App.js function App() { return ( lt;div className="App"gt; lt;Counters parentCallback = {handleCallback}/gt; lt;/divgt; ); } const handleCallback = () =gt; { console.log("CALLED FRM CHILD"); } //This is Child Component- Counters.jsx function Counters (props) { return ( lt;divgt; lt;button onClick={ ()=gt; parentHandler(props) }gt;CALL PARENTlt;/buttongt;lt;hr/gt; {//onClick={props.parentCallback} - This works well} lt;/divgt; ); }; function parentHandler (props) { props.parentCallback; // This line throws the aforementioned error } Комментарии:
1. Вы не вызываете функцию, она должна читать
props.parentCallback()2. Может быть, просто добавить скобки?
props.parentCallback()3. почему я должен использовать скобки? «Родительский обратный вызов» — это просто опора, а не функция, хотя она содержит функцию, делает ли это ее другой функцией? если это так, то почему это работает без скобок — onClick={props.parentCallback}.
Ответ №1:
Вы просто ссылаетесь на функцию. Не называю это. Вы можете изменить функцию скобок следующим образом
function parentHandler (props) { props.parentCallback() } Комментарии:
1. почему я должен использовать скобки? «Родительский обратный вызов» — это просто опора, а не функция, хотя она содержит функцию, делает ли это ее другой функцией? если это так, то почему это работает без скобок — onClick={props.parentCallback}.
Ответ №2:
отсутствие неиспользуемых выражений обычно означает, что вы оценили значение, но никогда не использовали его. Это правило направлено на устранение неиспользуемых выражений. Например if(true) 0
В вашем случае вы звоните props.parentCallback без скобок, оставляя неиспользованным. Либо вы добавляете скобки после такого вызова функции props.parentCallback() , либо возвращаете какое-то значение в конце. Таким образом, ваша ошибка eslint исчезнет.
Кроме onClick={props.parentCallback} того, это хорошо работает, потому что вы просто передаете ссылку на свою функцию родительскому компоненту. Но здесь onClick={ ()=gt; parentHandler(props) } вы создаете новую встроенную функцию для каждого рендеринга.
Ответ №3:
Спасибо вам за ваш ответ, ребята, но ни один из ответов не является именно тем, что я хотел. Наконец-то я сам получил ответ, как он есть:
Вам нужна функция для запуска сейчас?
Затем добавьте (), чтобы выполнить его
Вам нужно, чтобы на функцию ссылались, чтобы она вызывалась позже?
Не добавляйте ().
Еще один пример:
onClick=parentCallback() означает вызов «parentCallback() КАК можно скорее и установите его возвращаемое значение в onClick».
С другой стороны, onClick=parentCallback означает «onClick-это псевдоним для parentCallback. Если вы вызовете onClick(), вы получите те же результаты, что и при вызове parentCallback()»
Я нашел его, погуглив «вызов функции и ссылка на функцию».