javascript - 在 React 组件中创建自定义函数

Question

我有一个 React 组件

export default class Archive extends React.Component { 
   ...
}

componentDidMount 和 onClick 方法部分使用相同的代码，只是参数略有变化。

是否可以在组件类中创建一个函数，以便在组件范围内重复使用它？

Answer 1

您可以在 React 组件中创建函数。它实际上是常规的 ES6 class它继承自 React.Component。请小心并将其绑定(bind)到 onClick 事件中的正确上下文:

export default class Archive extends React.Component { 

    saySomething(something) {
        console.log(something);
    }

    handleClick(e) {
        this.saySomething("element clicked");
    }

    componentDidMount() {
        this.saySomething("component did mount");
    }

    render() {
        return <button onClick={this.handleClick.bind(this)} value="Click me" />;
    }
}