React에서 구성 요소 간에 기능을 공유하는 올바른 방법

React에서 구성 요소 간에 기능을 공유하는 올바른 방법

같은 작업을 수행해야 하는 컴포넌트가 여러 개 있습니다(자체 컴포넌트 위에 매핑하여 각각에 대해 작업을 수행하는 단순한 기능).현재 각 컴포넌트에서 이 방법을 정의하고 있습니다.하지만 딱 한 번만 정의하고 싶어요.

최상위 컴포넌트에서 정의하고 소품으로 전달할 수 있습니다.하지만 그건 좀 아닌 것 같아.소품이라기보다 도서관 기능인 것 같다.

올바른 방법은 무엇입니까?

최신 Javascript ES6 구문을 사용한 Utils.js

Utils.js 이런

const someCommonValues = ['common', 'values'];
    
export const doSomethingWithInput = (theInput) => {
   //Do something with the input
   return theInput;
};
    
export const justAnAlert = () => {
   alert('hello');
};

그런 다음 util 함수를 사용할 컴포넌트에서 필요한 특정 기능을 가져옵니다.모든 것을 Import 할 필요는 없습니다.

import {doSomethingWithInput, justAnAlert} from './path/to/Utils.js'

다음으로 컴포넌트 내에서 다음과 같은 기능을 사용합니다.

justAnAlert();
<p>{doSomethingWithInput('hello')}</p>

browserify 와 같은 것을 사용하는 경우는, 몇개의 유틸리티 기능을 export 하는 외부 파일(util.js)을 사용할 수 있습니다.

var doSomething = function(num) {
 return num + 1;
}

exports.doSomething = doSomething;

그 후 필요에 따라 요구

var doSomething = require('./util.js').doSomething;

도우미 기능의 스테이트를 조작하는 경우는, 다음의 순서에 따릅니다.

1. Helpers.js 파일을 만듭니다.

export function myFunc(){ return this.state.name; //define it according to your needs }

2. 구성 요소 파일의 도우미 기능 가져오기:

   import {myFunc} from 'path-to/Helpers.js'

3. 컨스트럭터에서 클래스에 도우미 함수를 추가합니다.

   constructor(){ super() this.myFunc = myFunc.bind(this) }

4. 렌더링 기능에서는 다음과 같이 사용합니다.

   'timeout()' { }

   . { this . m }}yFunc()}'

함수를 에 대한 입니다.FetchUtil.handleError 컴포넌트React "Recact" ( )에되어 있습니다App를 참조해 주세요.

해결책 1: 공통 사용JS 모듈 구문

module.exports = {
  handleError: function(response) {
    if (!response.ok) throw new Error(response.statusText);
    return response;
  },
};

솔루션 2: "create Class" 사용 (React v16)

util/FetchUtil.js

const createReactClass = require('create-react-class');

const FetchUtil = createReactClass({
  statics: {
    handleError: function(response) {
      if (!response.ok) throw new Error(response.statusText);
      return response;
    },
  },
  render() {
  },
});

export default FetchUtil;

React 그 이하 Import: React v15.4(또는 이하)를 Import해야 .createClass음음음같 뭇매하다

import React from 'react';
const FetchUtil = React.createClass({});

출처 : https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactcreateclass

컴포넌트(FetchUtil을 재사용)

컴포넌트/App.jsx

import Categories from './Categories.jsx';
import FetchUtil from '../utils/FetchUtil';
import Grid from 'material-ui/Grid';
import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {categories: []};
  }

  componentWillMount() {
    window
      .fetch('/rest/service/v1/categories')
      .then(FetchUtil.handleError)
      .then(response => response.json())
      .then(categories => this.setState({...this.state, categories}));
  }

  render() {
    return (
      <Grid container={true} spacing={16}>
        <Grid item={true} xs={12}>
          <Categories categories={this.state.categories} />
        </Grid>
      </Grid>
    );
  }
}

export default App;

아래 두 가지 스타일을 보여드리기 때문에 컴포넌트의 로직이 서로 어느 정도 관련되어 있는지에 따라 선택할 수 있습니다.

스타일 1 - 비교적 관련된 컴포넌트는 다음과 같은 콜백 참조를 사용하여 작성할 수 있습니다../components/App.js

<SomeItem
    ref={(instance) => {this.childA = instance}}
/>

<SomeOtherItem
    ref={(instance) => {this.childB = instance}}
/>

그리고 이렇게 서로 공유된 기능을 사용할 수 있습니다.

this.childA.investigateComponent(this.childB);  // call childA function with childB as arg
this.childB.makeNotesOnComponent(this.childA);  // call childB function with childA as arg

스타일 2 - 유틸리티 타입의 컴포넌트는 다음과 같이 작성할 수 있습니다../utils/time.js

export const getTimeDifference = function (start, end) {
    // return difference between start and end
}

그리고 이렇게 사용할 수 있습니다../components/App.js...

import React from 'react';
import {getTimeDifference} from './utils/time.js';

export default class App extends React.Component {
    someFunction() {
        console.log(getTimeDifference("19:00:00", "20:00:00"));
    }
}

어떤 것을 사용할까요?

로직이 비교적 관련이 있는 경우(같은 앱에서만 함께 사용됨), 컴포넌트 간에 상태를 공유해야 합니다.그러나 로직이 원격 관련(즉, 수학 util, 텍스트 형식 util)인 경우 util 클래스 함수를 만들고 Import해야 합니다.

util 파일을 작성하는 것 외에 다른 확실한 옵션은 상위 컴포넌트를 사용하여 다음 컴포넌트를 작성하는 것입니다.withComponentMapper()랩퍼이 컴포넌트는 컴포넌트를 파라미터로 받아들인 후 컴포넌트와 함께 반환한다.componentMapper()소품으로서 전해지는 기능.

이것은 리액트에서는 좋은 프랙티스로 간주됩니다.자세한 방법은 이쪽에서 확인할 수 있습니다.

유틸리티 기능처럼 들리는데, 이 경우 별도의 정적 유틸리티 모듈에 장착하면 어떨까요?

그렇지 않으면 Babel과 같은 트랜스필러를 사용하는 경우 es7의 정적 방법을 사용할 수 있습니다.

class MyComponent extends React.Component {
  static someMethod() { ...

또는 React.createClass를 사용하는 경우 statics 개체를 사용할 수 있습니다.

var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  }

단, 이러한 옵션은 권장하지 않습니다.유틸리티 메서드에 컴포넌트를 포함시키는 것은 의미가 없습니다.

또한 모든 컴포넌트를 통해 방법을 전달하면 안 됩니다.그러면 컴포넌트가 단단히 결합되어 리팩터링이 더욱 어려워집니다.오래된 유틸리티 모듈을 추천합니다.

다른 옵션은 mixin을 사용하여 클래스를 확장하는 것이지만, es6+에서는 할 수 없기 때문에 권장하지 않습니다(이 경우는 이점이 없습니다).

이거 믹스인 써야 되는 거 아니야?https://facebook.github.io/react/docs/reusable-components.html 를 참조해 주세요.

단, https://medium.com/ @dan_superv/superins - are - dead - long - live - super - order - components - 94a0d2f9e750 을 참조해 주세요.

도움이 될 것 같다

언급URL : https://stackoverflow.com/questions/32888728/correct-way-to-share-functions-between-components-in-react