未定义ReactJS未捕获的ReferenceError函数(ReactJS Uncaught ReferenceError function is not defined)

未定义ReactJS未捕获的ReferenceError函数(ReactJS Uncaught ReferenceError function is not defined)

我正在尝试使用ES6语法在React中实现自定义验证。

import React, { Component } from 'react'; export default class Board extends Component { constructor(props) { super(props); } static propTypes = { count: validate }; validate(props, propName, componentName){ if (props[propName]) { let value = props[propName]; if (typeof value === 'number') { if (value > 100) { return new Error("Value cannot be more than 100"); } } else{ return new Error('Count should be a number') } } }; render() { return ( <div className="board">{this.props.count}</div> ); } }

当我运行此代码时，出现错误“Uncaught ReferenceError：validate not defined”。 如果有人能帮我解决这个问题，我将不胜感激。

I am trying to implement a custom validation in React using ES6 syntax.

import React, { Component } from 'react'; export default class Board extends Component { constructor(props) { super(props); } static propTypes = { count: validate }; validate(props, propName, componentName){ if (props[propName]) { let value = props[propName]; if (typeof value === 'number') { if (value > 100) { return new Error("Value cannot be more than 100"); } } else{ return new Error('Count should be a number') } } }; render() { return ( <div className="board">{this.props.count}</div> ); } }

When I run this code, I get an error "Uncaught ReferenceError: validate is not defined". I will appreciate if someone could help me resolve this.

最满意答案

import React, { Component } from 'react'; export default class Board extends Component { constructor(props) { super(props); } render() { return ( <div className="board">{this.props.count}</div> ); } } const validate = (props, propName, componentName) => { if (props[propName]) { let value = props[propName]; if (typeof value === 'number') { if (value > 100) { return new Error("Value cannot be more than 100"); } } else{ return new Error('Count should be a number') } } }; Board.propTypes = { count: validate }

或者更简单......

import React, { Component } from 'react'; export default class Board extends Component { constructor(props) { super(props); } render() { return ( <div className="board">{this.props.count}</div> ); } } Board.propTypes = { count: (props, propName, componentName) => { if (props[propName]) { let value = props[propName]; if (typeof value === 'number') { if (value > 100) { return new Error("Value cannot be more than 100"); } } else{ return new Error('Count should be a number') } } } } import React, { Component } from 'react'; export default class Board extends Component { constructor(props) { super(props); } render() { return ( <div className="board">{this.props.count}</div> ); } } const validate = (props, propName, componentName) => { if (props[propName]) { let value = props[propName]; if (typeof value === 'number') { if (value > 100) { return new Error("Value cannot be more than 100"); } } else{ return new Error('Count should be a number') } } }; Board.propTypes = { count: validate }

or more simple...

import React, { Component } from 'react'; export default class Board extends Component { constructor(props) { super(props); } render() { return ( <div className="board">{this.props.count}</div> ); } } Board.propTypes = { count: (props, propName, componentName) => { if (props[propName]) { let value = props[propName]; if (typeof value === 'number') { if (value > 100) { return new Error("Value cannot be more than 100"); } } else{ return new Error('Count should be a number') } } } }