Использование реквизита в функции, которая не является компонентом в реакции - PullRequest
Новая
       11

Использование реквизита в функции, которая не является компонентом в реакции

0 голосов
/ 02 сентября 2018

Итак, скажем, например, мой код выглядит примерно так: 

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

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

Я хотел бы абстрагировать function1 в ее собственный файл и импортировать его, но мне все равно хотелось бы, чтобы он имел доступ к props / состоянию этого компонента (или избыточности).

Каков наилучший способ сделать это? Извините, если этот вопрос действительно странный, умный.

Ответы [ 2 ]

0 голосов
/ 02 сентября 2018

Вы можете сделать его многоразовым, как это: 

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 Вы также можете сделать именованный экспорт здесь, но это зависит.

0 голосов
/ 02 сентября 2018

Использование Function#bind()

Нереактивный пример для демонстрационных целей 

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..
...