Когда вызывать функцию против функции () в реагировать на клик?

Question

У меня есть вопросы о том, когда вызывать функцию внутри реагирующего компонента. Иногда мой код ломается, когда я не добавляю скобки к вызову функции, но не всегда. Есть ли какое-то правило, которое я здесь упускаю?

Не работает

// Callback of parent component
<Link onClick={this.props.OnNavigate}>
    A link
</Link>

Работает

// Callback of parent component
<Link onClick={this.props.OnNavigate()}>
    A link
</Link>

// Callback for function of component
<li onClick={this.toggleDepartments}>other example</li>

Answer 1

foo() вызывает функцию, на которую ссылается foo, foo сама по себе является просто ссылкой на функцию, она не вызывает функцию.

Итак, вам нужно использовать скобки, если вы хотите вызвать функцию прямо здесь и сейчас.
Вы должны опустить скобки, если хотите передать функцию другому коду, чтобы она могла вызывать функцию. Это было бы в случае с обработчиками событий. this.props.OnNavigation должен вызываться, когда происходит событие щелчка (которое наступит через некоторое время), а не при визуализации компонента.

Answer 2

Рекомендуется вызывать функцию с паренами, потому что когда вы создаете отдельный файл js и связываете их вместе с тегом script, вы точно знаете, что он вызывает эту конкретную функцию.