ESLint - Thành phần phải được viết dưới dạng hàm thuần túy (chức năng thích ứng phản ứng/không trạng thái)

Question

ESLint cho tôi lỗi này trên một dự án phản ứng.

ESLint - Hợp phần nên được viết như một hàm thuần túy (phản ứng thích/chức năng stateless)

Nó trỏ đến dòng đầu tiên của các thành phần.

export class myComponent extends React.Component { 
render() { 
    return (

     //stuff here 

    ); 
    } 
} 

Làm cách nào để loại bỏ lỗi này?

Answer 1

Hai lựa chọn.

Tạm thời vô hiệu hóa cảnh báo(chưa được kiểm tra, có nhiều cách để làm điều này)

// eslint-disable-next-line prefer-stateless-function 
export class myComponent extends React.Component { 
    ... 
} 

Viết nó như là một thành phần không quốc tịch tinh khiết

Giá trị trả lại được sử dụng như render phương pháp của một thành phần dựa trên lớp học:

export const myComponent =() => { 
    return (
    // Stuff here 
) 
} 

(Hoặc sử dụng ký hiệu phi ES6 nếu đó là điều bạn.)

Đối với các thành phần như thế này với không có logic hỗ trợ khác Tôi thích sự trở lại tiềm ẩn, ví dụ,

export MyComponent =() => 
    <div> 
    // Stuff here 
    </div> 

Đây là một vấn đề sở thích. Tôi sẽ nói rằng bạn nên tuân theo các quy ước đặt tên React, và giữ tất cả các thành phần bắt đầu bằng một chữ cái viết hoa.

Nếu bạn cần đạo cụ, họ đang được thông qua vào như là đối số cho hàm:

const MyComponent = (props) => 
    <div> 
    <Something someProp={props.foo} /> 
    </div> 

export MyComponent 

Và bạn có thể destructure trong tham số:

const MyComponent = ({ foo }) => 
    <div> 
    <Something someProp={foo} /> 
    </div> 

này có thể làm cho sự trở lại tiềm ẩn một ít dễ dàng hơn nếu bạn đang sử dụng các loại vars địa phương.

Answer 2

Viết thành phần của bạn như là một hàm không quốc tịch:

export myComponent =() => { //stuff here }; 

Thực tế, có hai phong cách xác định các thành phần trong React: các thành phần chức năng (mà chỉ là chức năng từ đạo cụ để một bộ phận Phản ứng) và các thành phần lớp.

Sự khác biệt chính giữa chúng là thành phần lớp có thể có state và vòng đời các phương pháp như componentDidMount, componentDidUpdate vv

Bất cứ khi nào bạn không cần nhà nước của phương pháp vòng đời, bạn nên viết thành phần của bạn như một stateless chức năng, như là các thành phần không trạng thái nói chung dễ hiểu hơn.

Để viết một thành phần chức năng, bạn viết một hàm lấy một đối số duy nhất. Lập luận này sẽ nhận được đạo cụ của thành phần. Do đó, bạn không sử dụng this.props để truy cập vào các đạo cụ của thành phần - bạn chỉ cần sử dụng đối số của hàm.

Answer 3

Nếu tất cả những gì bạn đang làm là hiển thị mẫu jsx và không khai báo trạng thái với constructor(props), thì bạn nên viết thành phần của mình làm hàm đạo cụ thuần túy và không sử dụng từ khóa class để xác định.

ví dụ:

export const myComponent =() => (
    // jsx goes here 
); 

Answer 4

Bạn sẽ nhận được lỗi này chỉ khi lớp của bạn không có bất kỳ phương pháp vòng đời hoặc hàm tạo nào. Để giải quyết vấn đề này, bạn phải vô hiệu hóa thuộc tính lint hoặc biến nó thành một hàm thuần túy hoặc tạo hàm tạo cho lớp đó.

Answer 5

const myComponent =() => { 
return (
    //stuff here 

); 
}; 

export default myComponent; 

Và trong app.js tập tin chỉ nhập phần này như chúng ta làm cho lớp như

import myComponent from './myComponent.js' 

và gọi như

<myComponent /> 

Nó sẽ làm việc cho chắc chắn.