2016-08-10 1 views
0

У меня есть следующие функции стрелка в so calledcurried format, взятые из this SO answer:Curried функции где ES7 Инициализаторы свойства не включены

const getIntervals = n=> availability=> {} 

мне нужно использовать его в React компонента, написанном в синтаксисе ES6, которые не могут обрабатывать инициализаторы свойств ES7 из-за the implementation.

«Обычно» функция в контексте класса в React имеет этот простой стиль:

myFunction() {} 

Но я бы преобразовать функцию getIntervals в этом стиле?

+0

ES7 не имеет инициализаторами собственности. Вы говорите о [этом предложении] (https://jeffmo.github.io/es-class-public-fields/)? –

ответ

3

Просто определить getIntervals как обычный метод, но есть его вернуть выделанной функцию:

class Example extends Component { 
    getIntervals(n) { 
     return (availability) => { 

     } 
    } 
    render() {...} 
} 
1

Прохладный, чтобы увидеть свою работу, на который ссылается на другой вопрос. Я рад, что это работает для вас.

@RobM предоставил вам (за обычный) хороший ответ, но я дам вам еще один вариант.

Во-первых, вам не нужно сохранять функцию в картонном формате. Так как это пользовательская процедура, если вам будет лучше, если она возьмет кортеж, вы можете это сделать! Преобразование его так же просто, как & hellip; †

// curried form 
const getIntervals = n=> availability=> { ... } 

// uncurried form 
const getIntervals = (n,availability)=> { ... } 

Затем, когда вы называете его

// curried form 
getIntervals (30) (availability) 

// changes to 
getIntervals(30, availability) 

Я обычно определяют функции в выделанной форме, но это ни в коем случае не требование вы должны следовать. В неопознанной форме вы можете определить его непосредственно на своем компоненте React, например so & hellip;

class Example extends Component 
    getIntervals (n,availability) { 
    // ... 
    } 
} 

Или потому, что getIntervals является родовой и чистой функцией, нет никаких причин, чтобы вставлять весь код внутри компонента. Вы можете так же легко оставить его полностью отдельно

// curried 
const getIntervals = n=> availability=> { ... } 

// or choose uncurried 
const getIntervals = (n,availability)=> { ... } 

// call it from withint the class 
class Example extends Component 
    getIntervals (availability) { 
    return getIntervals (this.props.intervalLength, availability) 
    } 
} 

Или, теперь вы можете увидеть, как бесполезно это иметь функцию обертку вообще. Более вероятно, что возвращаемое значение будет использоваться каким-то другим способом, например, в обработчике события или некоторой мутации состояния   & hellip;

const getIntervals = (n,availability) => { ... } 

class Example extends Component { 
    // constructor ... 
    onclick (event) { 
    let intervals = getIntervals(this.props.intervalLength, this.state.availability) 
    // do something with intervals 
    console.log(intervals) 
    } 
    render() { 
    return <button onClick={e=> onclick(e)}>show intervals</button> 
    }  
} 

Теперь getIntervals может оставить этот файл в целом, если вы хотите. Вы могли бы бросить его в utils.js и импортировать его

import {getIntervals} from './utils' 

class Example extends Component { 
    onclick (event) { 
    let intervals = getIntervals(this.props.intervalLength, this.state.availability) 
    // ... 
    } 
    // ... 
} 

Я использую this.props.intervalLength и this.state.availability в качестве примеров. Я действительно не знаю, как эти два значения связаны с компонентом.Я оставляю это до вас^_^


† преобразование из кэрри в uncurried процедуры, как правило, просто, но вы должны быть осторожны в том случае, кэрри процедура является рекурсивной один — в этом случае, вы» d также необходимо обновить рекурсивный вызов, чтобы быть в невоплощенном виде.

Я оставляю это в качестве сноски, потому что я написал getIntervals и преобразование просто в данном конкретном случае

+0

Благодарим вас за то, что вы просвещали мой мир, это были фантастические дни благодаря вашим учениям. –

+0

С удовольствием^_ ^ – naomik

Смежные вопросы