道具验证中缺少功能组件中的道具

Question

Eslint 抛出 eslint(react/prop-types) 错误，尽管已经声明了 propTypes。我正在使用 eslint-plugin-react

我已经查看了其他几个类似的问题以及 lint rule for the proptype，但它们没有解决我的问题。

import React from 'react';
import { View, Text, TouchableHighlight, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';

const PASTEL_PINK = '#dea5a4';
const PASTEL_BLUE = '#779ecb';

const Buttons = ({ onPressStart, onPressPause, onPressReset, onGoing }) => (
  <View >
    <TouchableHighlight
      onPress={onPressStart}
      disabled={onGoing}
    >
      <Text >{START_TIMER}</Text>
    </TouchableHighlight>
    <TouchableHighlight
      onPress={onPressPause}
      disabled={!onGoing}
    >
      <Text >{PAUSE_TIMER}</Text>
    </TouchableHighlight>
    <TouchableHighlight onPress={onPressReset}>
      <Text >{RESET_TIMER}</Text>
    </TouchableHighlight>
  </View>
);

Buttons.protoTypes = {
  onPressStart: PropTypes.func.isRequired,
  onPressPause: PropTypes.func.isRequired,
  onPressReset: PropTypes.func.isRequired,
  onGoing: PropTypes.bool.isRequired,
};

export default Buttons;

提供道具的父组件

import React from 'react';
import Buttons from './components/Buttons'
import Container from './components/Container';
import Timer from './components/Timer';
import Inputs from './components/Inputs';
import Logo from './components/Logo';
import Buttons from './components/Buttons'
import Header from './components/Header'

export default class Home extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      initialMinute: '00',
      initialSecond: '00',
      minute: '00',
      second: '00',
      completed: false,
      onGoing: false,
    }

  componentWillMount() {
    this.setState({
        minute: this.state.initialMinute,
        second: this.state.initialSecond,
      }
    );
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  startTimer = () => {
    console.log("Timer Started")
    this.setState(
      (prevState) => (
        {
          completed: false,
          onGoing: true,
        }
      )
    )
    // start the timer
    this.interval = setInterval(
      this.decrementTime,
      1000
    )
  }

  decrementTime = () => {
    if (this.state.second > 0) {
      console.log(`second: ${this.state.second}`)
      this.setState(
        (prevState) => (
          {second: prevState.second - 1}
        )
      )
      if (this.props.second < 10) {
        this.setState({
            second: '0'+this.state.second
        });
      }
    }
    else {
      if (this.state.minute > 0) {
        this.setState(
          (prevState) => (
            {
              minute: prevState.minute - 1,
              second: prevState.second + 59,
            }
          )
        )
        if (this.props.minute < 10) {
          this.setState({
              state: '0'+this.state.minute
          });
        }
      }
      else {
        this.resetTimer();
        this.timesUp(true);
      }
    }
  }

  pauseTimer = () => {
    console.log("Timer stopped")
    clearInterval(this.interval);
    this.setState({
        onGoing: false,
      }
    )
  }

  resetTimer = () => {
    console.log("Timer is reset")
    this.pauseTimer();
    this.setState({
        minute: this.state.initialMinute,
        second: this.state.initialSecond,
      }
    );
  }

  timesUp = (bool) => {
    this.setState(
      (prevState) => (
        {
          completed: bool,
        }
      )
    )
  }


  optionPressed = () => {
    console.log("Header is pressed")
  }

  handleMinuteInput = (text) => {
    // clamp minute between 0 and 60
    // const number = helper.clamp(parseInt(text), 0, 60)
    this.setState(
      {
        initialMinute: text,
      }
    )
  }

  handleSecondInput = (text) => {
    // const number = helper.clamp(parseInt(text+''), 0, 60)
    this.setState(
      {
        initialSecond: text,
      }
    )
  } 

  render() {
    return (
      <Container>
        <Header onPress={this.optionPressed}/>
          <Logo 
            slogan={'Get studying, the Pomodoro way!'}
            imageSource={'../../assets/pomo-timer-logo-small.png'}
          />
          <Timer 
            minute={this.state.minute}
            second={this.state.second}
            completed={this.state.completed}
            onGoing={this.state.onGoing}
          />
          <Buttons 
            onPressStart={this.startTimer}
            onPressPause={this.pauseTimer}
            onPressReset={this.resetTimer}
            onGoing={this.state.onGoing} // true when not onGoing
          />
          <Inputs 
            inputType={'Work'}
            labelColor={PASTEL_BLUE}
            handleMinuteInput={this.handleMinuteInput}
            handleSecondInput={this.handleSecondInput}
            onGoing={this.state.onGoing}
          />
          <Inputs
            inputType={'Rest'}
            labelColor={PASTEL_PINK}
            // setTimer={this.setTimer}
            handleMinuteInput={this.handleMinuteInput}
            handleSecondInput={this.handleSecondInput}
            onGoing={this.state.onGoing}
          />
      </Container>
    )
  }
}

我不希望出现这些错误，但确实会出现。

道具验证中缺少

'onPressStart' 道具验证中缺少 'onPressPause' 道具验证中缺少 'onPressReset' 'onGoing' 道具验证中缺少

Answer 1

替换

Buttons.protoTypes

和

Buttons.propTypes

这个错误我犯过太多次了

Answer 2

是propTypes，不是protoTypes :)

道具验证中缺少功能组件中的道具

Props in functional component are missing in props validation

javascript

reactjs

eslint

react-native

react-proptypes