Question

我在我的react-native项目中编写了一个react类组件。我在项目中使用ESLint扩展了airbnb样式规则。

此组件具有一个将其表单值存储在Redux中的表单。它从Redux初始化表单值，并使用导入到文件中的操作创建者（称为employeeUpdate）来更新它们。在这种情况下，我的组件中不需要任何生命周期方法或构造函数。

问题是ESLint抱怨我应该将此组件作为纯函数编写。我不能将其编写为纯函数，因为它正在消耗Redux的状态作为道具。这是特定的错误：

[eslint]组件应编写为纯函数

这是我的代码：

import React, { Component } from 'react';
import { Picker, Text } from 'react-native';
import { connect } from 'react-redux';
import { Card, CardSection, Input, Button } from './common';
import { employeeUpdate } from '../actions';

const styles = {
  pickerTextStyle: {
    fontSize: 18,
    paddingLeft: 20
  }
};

class EmployeeCreate extends Component {
  render() {
    const { name, phone, shift, employeeUpdate } = this.props;

    return (
      <Card>
        <CardSection>
          <Input
            label="Name"
            placeholder="Jane"
            value={name}
            onChangeText={value => employeeUpdate({ prop: 'name', value })}
          />
        </CardSection>
        <CardSection>
          <Input
            label="Phone"
            placeholder="555-555-5555"
            value={phone}
            onChangeText={value => employeeUpdate({ prop: 'phone', value })}
          />
        </CardSection>
        <CardSection style={{ flexDirection: 'column' }}>
          <Text style={styles.pickerTextStyle}>Shift</Text>
          <Picker
            selectedValue={shift}
            onValueChange={value => employeeUpdate({ prop: 'shift', value })}
            style={{ flex: 1 }}
          >
            <Picker.Item label="Monday" value="Monday" />
            <Picker.Item label="Tuesday" value="Tuesday" />
            <Picker.Item label="Wednesday" value="Wednesday" />
            <Picker.Item label="Thursday" value="Thursday" />
            <Picker.Item label="Friday" value="Friday" />
            <Picker.Item label="Saturday" value="Saturday" />
            <Picker.Item label="Sunday" value="Sunday" />
          </Picker>
        </CardSection>
        <CardSection>
          <Button>Create</Button>
        </CardSection>
      </Card>
    );
  }
}

const mapStateToProps = state => {
  const { name, phone, shift } = state.employeeForm;
  return { name, phone, shift };
};

export default connect(
  mapStateToProps,
  { employeeUpdate }
)(EmployeeCreate);

我试了一下，并尝试将其作为纯函数编写（下面的代码），但是当我分解动作创建者的结构时，ESLint再次抱怨我的动作创建者已经被声明（因为它被导入到了动作创建者的顶部）。文件）

import React from 'react';
import { Picker, Text } from 'react-native';
import { connect } from 'react-redux';
import { Card, CardSection, Input, Button } from './common';
import { employeeUpdate } from '../actions';

const styles = {
  pickerTextStyle: {
    fontSize: 18,
    paddingLeft: 20
  }
};

const EmployeeCreate = ({ name, phone, shift, employeeUpdate }) => (
  <Card>
    <CardSection>
      <Input
        label="Name"
        placeholder="Jane"
        value={name}
        onChangeText={value => employeeUpdate({ prop: 'name', value })}
      />
    </CardSection>
    <CardSection>
      <Input
        label="Phone"
        placeholder="555-555-5555"
        value={phone}
        onChangeText={value => employeeUpdate({ prop: 'phone', value })}
      />
    </CardSection>
    <CardSection style={{ flexDirection: 'column' }}>
      <Text style={styles.pickerTextStyle}>Shift</Text>
      <Picker
        selectedValue={shift}
        onValueChange={value => employeeUpdate({ prop: 'shift', value })}
        style={{ flex: 1 }}
      >
        <Picker.Item label="Monday" value="Monday" />
        <Picker.Item label="Tuesday" value="Tuesday" />
        <Picker.Item label="Wednesday" value="Wednesday" />
        <Picker.Item label="Thursday" value="Thursday" />
        <Picker.Item label="Friday" value="Friday" />
        <Picker.Item label="Saturday" value="Saturday" />
        <Picker.Item label="Sunday" value="Sunday" />
      </Picker>
    </CardSection>
    <CardSection>
      <Button>Create</Button>
    </CardSection>
  </Card>
);

const mapStateToProps = state => {
  const { name, phone, shift } = state.employeeForm;
  return { name, phone, shift };
};

export default connect(
  mapStateToProps,
  { employeeUpdate }
)(EmployeeCreate);

是否有解决此问题的方法？我不能将其编写为React类组件，不使用任何生命周期方法并且不会从ESLint中获取任何错误吗？

注意：

我知道我可以禁用该规则，但是我想在项目的其他组件中受到ESLint的警告。
也许可以将动作创建者导入其他别名下，但是我仍然认为这不是编写组件的最佳方法。

Answer 1

如果您不需要状态或生命周期方法，那么纯函数是您的理想选择。

我看到两种方法来修复您的代码：

使用其他文件进行连接。将jsx与纯组件分开在一个文件中，然后使用另一个将道具和动作创建者联系起来，这很酷。
如果您希望将所有内容都放在同一个文件中，则始终可以将prop重命名为：

const EmployeeCreate =（{名称，电话，班次，employeeUpdate：updateEmployee}）=>（

现在，您的employeeUpdate在组件内部被声明为updateEmployee，并且没有重复的声明。

PS：实际上，对于Hooks来说，纯函数可能一直是必经之路。

ESlint：当我使用Redux创建类组件时，组件应写为纯函数错误

1 个答案: