Лучший способ поделиться функцией в реакции

Question

Я новичок в реакции. Интересно, что является лучшим вариантом для совместного использования функций (кроме наследования). В наследовании я могу сделать что-то вроде этого:

class BaseForm {
    updateForm() => {};
}

class MyFormOne extends BaseForm {
    // this.updateForm();
}

И я могу кодировать несколько компонентов Form, которые расширяют BaseForm, и я могу использовать метод updateForm в каждом. Как лучше реагировать на это?

Answer 1

Существует несколько способов задать вопрос:

1) Если общий fn c является функцией stati c (независимо от компонента). Вам следует создать общий файл утилит. js, а затем экспорт, функция импорта , куда вы хотите

// utils.js
export function updateForm() { }

// MyformOne.js
import {updateForm} from './utils';
// Use fnc updateForm() in MyFormOne component

2) Если общий fn c зависит от компонента класса, вы должны использовать шаблон проектирования в React: HO C (компонент более высокого порядка) или рендеринг Props для совместного использования кода (состояний, функций) между компонентами React (визуализация вашего код более абстрактный => хорошая практика для многоразового использования)

class BaseForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      a1 : "",
      a2 : "",
    }
  }

  // example : share the func updateForm of Baseform
  updateForm = () => {}

  render() {
    return (
      <div>
        {/*
          use the `render` prop to dynamically determine what to render.
        */}
        {this.props.render(this.state, this.updateForm)}
      </div>
    );
  }
}

class WithBaseForm extends React.Component {
  render() {
    return (
      <div>
        <BaseForm render={(stateBaseForm, updateForm) => (
          <MyFormOne stateBaseForm={stateBaseForm} updateForm={updateForm}/> // so MyFormOne could use the fnc updateForm of BaseForm
        )}/>
      </div>
    );
  }
}

Для более подробной информации просмотрите ссылку:

https://en.reactjs.org/docs/render-props.html

https://en.reactjs.org/docs/higher-order-components.html

Answer 2

Вы можете создать файл utils.js и разместить там общие функции JS. Примерно так:

export const updateFormCommon = (inputValue) => {

   // Your function logic here

   return something;
};

export const showMessage = () => {
   alert('hello world');
};

Теперь вы можете импортировать utils.js туда, куда вам нужно, и вызывать ваши общие \ общие функции следующим образом:

import {updateFormCommon, showMessage} from './utils'

let result = updateFormCommon(1000)}

showMessage();