Question

例如，说我的代码看起来像这样：

class DoSomething extends Component{
  function1(var1, var2){
    return var1 * var2 / this.props.var3
  }

  render(){
    <div>{function1(10, 20)}</div>
  }
}

我想将function1抽象到其自己的文件中并导入，但是我仍然希望它能够访问此组件的（或redux的）props /状态。

实现此目标的最佳方法是什么？抱歉，这个问题真是太过分了，很抱歉。

Answer 1

使用Function#bind()

用于演示目的的非React示例

const func1 = function(var1, var2) {
  return var1 * var2 / this.props.var3
}

class DoSomething {
  constructor() {
    //fake props for demo,  wouldn't need this in React Component 
    this.props = {var3: 3};
    // assign an internal version of func1 to use within this component class
    this.func1 = func1.bind(this);
  }

  render(){
       const calc = this.func1(10,20)
       return  /*<div>{calc}</div>*/
  }
}


console.log(new DoSomething().func1(10, 10))// expect 10*10/3 = 33.33..

Answer 2

您可以像这样使它可重用：

import Function1 from './Function

class DoSomething extends Component{

  render(){
    <div>
    <Function1 var1={1} var2={2}</div>

  }
}

您的Function1是作为Funtion1.js的单独文件

export default (props) => (  console.log(props); // do anything you want )

PS，您也可以在此处进行命名导出，但这要视情况而定。

在不是react组件的函数中使用props

2 个答案: