Каким способом лучше отправлять ссылки на функции для реагирующих компонентов?

Question

Я пытаюсь отправить ссылку на функцию импортированному компоненту. Так что лучше использовать атрибут ref или реквизит?

Я хочу найти оптимальный и стандартный метод.

<MyComponent ref="ListView" />

Или этот метод:

<MyComponent show="this.showModal" hide="this.hideModal" />

Answer 1

Вы хотите отправить обработчик событий на дочерний компонент от родительский , если я правильно понимаю ваш вопрос?

parent.js

class ParentComponent extends Component {

  handler = () => {
     console.log("handler click">
  }

  render() {
    return (
      <div>
         <Child handler={this.handler} />
      </div>
    );
  }

}

child.js

const Child = ({ handler }) => (
  <Button onClick={handler} />
)

Answer 2

EDIT: Я понял ваш вопрос: если у вас есть много методов, которые вы можете использовать ... реквизиты, но вы также можете передавать реквизиты как отдельные методы.

Я думаю, что вы имеете в виду различия между контролируемыми и неконтролируемыми компонентами: uncontrolled- https://reactjs.org/docs/uncontrolled-components.html контролируемым https://reactjs.org/docs/forms.html

Ответ на этот вопрос зависит от "логики" вашего компонента, если вы хотите управлять им с помощью DOM (используя ссылки) или самим компонентом.

Answer 3

Мы не используем ссылки для обработки событий, предпочтительно передавать обработчики как реквизиты дочернему компоненту, используя синтаксис JSX с {} фигурными скобками.

Answer 4

Эффект не будет, если вы передадите функции в виде строки (например, "this.showModal").

Передайте их в фигурных скобках:

<MyComponent show={this.showModal} hide={this.hideModal} />

Цель ссылки - манипулировать DOM напрямую, а не передавать что-либо компоненту. Например, вы можете манипулировать DOM с помощью jQuery