2016-02-22 3 views
9

Я создаю простое приложение с использованием React Redux. Я хочу использовать декоратор, чтобы ввести некоторые методы в моем компоненте .. Я видел аналогичный код в других проектах:Как использовать декораторы в приложении React Redux?

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 


@creatable 
export default class BookDetails extends Component { 

    render() { 
    console.log(this.props); 
    if (!this.props.Activebook) { 
     return <div> please select book</div> 
    } 
    return (
     <div>{this.props.Activebook.title}</div> 
    ); 
    } 
} 


function creatable() { 
    return Create => { 
    @connect(state=>({Activebook : state.ActiveBook})) 
    class MyDecorator extends Component { 
    render() { 
     console.log('>>>>>>>>>>>>>'); 
    console.log(this.props); 
     console.log('>>>>>>>>>>>>>'); 
     return (
     <div> 
      <Create 
       {...this.props} 
      /> 
     </div> 
     ) 
    } 

    } 
    return MyDecorator; 
    } 
} 

К сожалению, приведенный выше код не работает. Зачем?

+1

Определить «не работает»? – loganfsmyth

+0

, когда я тестировал этот код, он показывал мне ошибку около @ creatable Просто я хочу, чтобы рабочий пример, как указано выше. – user3126894

+0

@ user3126894 Если вы получаете сообщение об ошибке, оно должно быть представлено в описании проблемы. – lux

ответ

3

Babel 6 не поддерживает декораторы с предустановленной предустановкой es2015, а также с предустановкой stage-0. Вы должны добавить babel-plugin-transform-decorators-legacy плагин для того, чтобы декораторы:

$ npm install --save-dev babel-plugin-transform-decorators-legacy 

и добавить в плагинах в .babelrc:

{ 
    "plugins": [ 
    "transform-decorators-legacy", 
    ... 
    ] 
} 

Это самый простой способ я знаю, чтобы получить поддержку декоратора. Они не включены в Babel по умолчанию, поскольку они пока еще не стандартизированы.

+0

ой! который отсутствовал в моем пакете.json. позвольте мне попробовать. благодаря – user3126894

10

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

Просто потому, что некоторые примеры сообщества используют их вовсе не означают, что это хорошая идея: спецификации по-прежнему меняются, инструментальная поддержка является слоеной, и, честно говоря, вам не нужны декораторы для connect(), потому что они desugar к простой функции звонки.

Например, вместо

@connect(mapStateToProps) 
class MyComponent extends Component {} 

вы должны написать

class MyComponent extends Component {} 
MyComponent = connect(mapStateToProps)(MyComponent) 

Таким образом, вы не должны беспокоиться о взломе, пока предложение не является частью языка.

Я рекомендую вам придерживаться конвенций, которые мы используем в official Redux examples, и очень осторожно относимся к принятию экспериментальных расширений синтаксиса.

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