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

我有一个反应组件

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

componentDidMount

和

onClick

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

---

是否可以在component类内创建函数，以便在组件范围内重用该函数？

您可以在react components中创建函数。它实际上是从

React.Component

继承的规则。只需小心，并将其绑定到

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" />;
    }
}

导出默认类存档扩展React.Component{
说点什么{
console.log（某物）；
}
handleClick（e）{
这个。说点什么（“元素点击”）；
}
componentDidMount（）{
这个.saymothing（“组件确实安装了”）；
}
render（）{
返回；
}
}

您可以试试这个

// Author: Hannad Rehman Sat Jun 03 2017 12:59:09 GMT+0530 (India Standard Time)

import React from 'react';
import RippleButton from '../../Components/RippleButton/rippleButton.jsx';

class HtmlComponents extends React.Component {

    constructor(props){
        super(props);
        this.rippleClickFunction=this.rippleClickFunction.bind(this);
    }

    rippleClickFunction(){
        //do stuff. 
        // foo==bar
    }

    render() {
      return (
         <article>
             <h1>React Components</h1>
             <RippleButton onClick={this.rippleClickFunction}/>
         </article>
      );
   }
}

export default HtmlComponents;

//作者：Hannad Rehman 2017年6月3日星期六12:59:09 GMT+0530（印度标准时间）
从“React”导入React；
从“../../Components/RippleButton/RippleButton.jsx”导入RippleButton；
类HtmlComponents扩展React.Component{
建造师（道具）{
超级（道具）；
this.rippleClickFunction=this.rippleClickFunction.bind（this）；
}
rippleClickFunction（）{
//做事。
//foo==巴
}
render（）{
返回(
反应组分
);
}
}
导出默认HtmlComponents；

唯一需要考虑的是您必须以另一种方式将上下文绑定到函数：

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} value="Click me" />;
  }
}

导出默认类存档扩展React.Component{
说某事=（某事）=>{
console.log（某物）；
}
handleClick=（e）=>{
这个。说点什么（“元素点击”）；
}
componentDidMount（）{
这个.saymothing（“组件确实安装了”）；
}
render（）{
返回；
}
}

---

在这种格式中，您不需要以React函数方式使用

bind

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import Button from "@material-ui/core/Button";

const App = () => {
  const saySomething = (something) => {
    console.log(something);
  };
  useEffect(() => {
    saySomething("from useEffect");
  });
  const handleClick = (e) => {
    saySomething("element clicked");
  };
  return (
    <Button variant="contained" color="primary" onClick={handleClick}>
      Hello World
    </Button>
  );
};

ReactDOM.render(<App />, document.querySelector("#app"));

import React，{useffect}来自“React”；
从“react dom”导入react dom；
从“@物料界面/核心/按钮”导入按钮；
常量应用=（）=>{
const saySomething=（something）=>{
console.log（某物）；
};
useffect（（）=>{
说些什么（“来自使用效果”）；
});
常量handleClick=（e）=>{
说点什么（“元素点击”）；
};
返回(
你好，世界
);
};
ReactDOM.render（
太简单了…谢谢！如果要递归调用函数怎么办？如何在函数中调用它？@Norfeldt与非递归调用一样简单，只需调用方法/函数
this.myMethod（）
@RBT当然，它会调用函数。问题是方法中的
这个
将不是您所期望的。在这里了解更多信息@FedericoCapaldo只绑定函数一次，在构造函数中，我可以尝试从不同的组件访问这些本地函数吗？我的意思是，我们可以导出这样的函数吗？事实上，我得到了ing ERROR我不建议这样做。我只是在另一个文件中创建一个函数，然后在两个（或更多）文件中调用该函数在我上面的例子中，我会添加一个
saysome.js
并在那里导出
saysome
。然后在这两个组件中
导入saysome
，然后调用函数。这种方法的优点是
saysome
可以单独进行单元测试，并且有两个独立的组件所以用相同的代码而不是纠结在一起是的…这是个好主意…谢谢！