Cách chính xác để chia sẻ các chức năng giữa các thành phần trong React

Question

Tôi có nhiều thành phần cần phải thực hiện tương tự. (Một chức năng đơn giản mà bản đồ trên các thành phần con của họ và làm một cái gì đó cho mỗi một). Tại thời điểm này tôi đang xác định phương pháp này trong mỗi thành phần. Nhưng tôi chỉ muốn xác định nó một lần.

Tôi có thể xác định nó trong thành phần cấp cao nhất và sau đó chuyển nó xuống dưới dạng giá đỡ. Nhưng điều đó không hoàn toàn đúng. Nó là một chức năng thư viện hơn là một prop. (Dường như với tôi).

Cách chính xác để thực hiện việc này là gì?

Answer 1

Nếu bạn sử dụng một cái gì đó như browserify thì bạn có thể có tệp bên ngoài, ví dụ: util.js xuất một số hàm tiện ích.

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

exports.doSomething = doSomething; 

Sau đó yêu cầu nó khi cần thiết

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

Answer 2

Âm thanh như một chức năng hữu ích, trong trường hợp đó tại sao không đặt nó trong một mô-đun tiện ích riêng biệt tĩnh?

Nếu không nếu sử dụng một transpiler như Babel bạn có thể tận dụng các phương pháp tĩnh ES7 của:

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

Hoặc khác nếu bạn đang sử dụng React.createClass bạn có thể sử dụng đối tượng statics:

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

Tuy nhiên, tôi không khuyên các tùy chọn đó, nó không có ý nghĩa để bao gồm một thành phần cho một phương thức tiện ích.

Ngoài ra, bạn không nên vượt qua một phương pháp xuống qua tất cả các thành phần của bạn như là một prop nó sẽ chặt chẽ cặp vợ chồng chúng và làm cho tái cấu trúc đau đớn hơn. Tôi khuyên một mô-đun tiện ích cũ đơn giản.

Tùy chọn khác là sử dụng mixin để mở rộng lớp, nhưng tôi không khuyên bạn nên không thể làm điều đó trong es6 + (và tôi không thấy lợi ích trong trường hợp này).

Answer 3

Bạn không nên sử dụng Mixin cho điều này? Xem https://facebook.github.io/react/docs/reusable-components.html

Mặc dù họ đang rơi ra khỏi lợi thấy https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

Có thể hữu ích

Answer 4

Dưới đây là một số ví dụ về cách bạn có thể tái sử dụng một chức năng (FetchUtil.handleError) trong một thành phần Phản ứng (App).

Giải pháp 1: Sử dụng CommonJS cú pháp mô-đun

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

Giải pháp 2: Sử dụng "createClass" (Phản ứng 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; 

Lưu ý: Nếu bạn đang sử dụng React v15.4 (hoặc thấp hơn), bạn cần phải nhập khẩu createClass như sau:

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

Nguồn: https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactcreateclass

Component (mà reuses FetchUtil)

components/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;