Question

我正在使用Meteor React并尝试使用react-autosuggest工作（来自基本用法示例https://github.com/moroshko/react-autosuggest

我得到的错误是STATEMENT_PREFIX - 它发生在onChange（就在this.state之后。

＆＃13;

Missing class properties transform

＆＃13;

我环顾四周，看看能否找到解决方案，但没有运气。

希望有人可以了解正在发生的事情。

Answer 1

使用class Example extends React.Component {...}不适用于meteor。请尝试这种方法：

import React from 'react';
import Autosuggest from 'react-autosuggest';
import AutosuggestHighlight from 'autosuggest-highlight';

Example = React.createClass({
  getInitialState() {
    return {
      value: '',
      suggestions: [],
    };
  },

  onChange(event, { newValue }) {
    this.setState({
      value: newValue,
    });
  },

  onSuggestionsFetchRequested({ value }) {
    this.setState({
      suggestions: this.getSuggestions(value),
    });
  },

  onSuggestionsClearRequested() {
    this.setState({
      suggestions: [],
    });
  },

  getSuggestionValue(suggestion) {
    return suggestion.name;
  },

  getSuggestions(value) {
    const languages = [
      {
        name: 'C',
        year: 1973,
      },
      {
        name: 'C#',
        year: 2001,
      },
      {
        name: 'C++',
        year: 1984,
      },
      {
        name: 'Clojure',
        year: 2008,
      },
      {
        name: 'Elm',
        year: 2013,
      },
      {
        name: 'Go',
        year: 2010,
      },
    ];
    const inputValue = value.trim().toLowerCase();
    const inputLength = inputValue.length;

    if (inputLength === 0) {
      return [];
    }

    return languages.filter(language =>
      language.name.toLowerCase().slice(0, inputLength) === inputValue
    );
  },

  renderSuggestion(suggestion, { query }) {
    const suggestionText = `${suggestion.name} (${suggestion.year})`;
    const matches = AutosuggestHighlight.match(suggestionText, query);
    const parts = AutosuggestHighlight.parse(suggestionText, matches);

    return (
      <span className="suggestion-content">
        <span>
          {
            parts.map((part, index) => {
              const className = part.highlight ? 'highlight' : null;

              return (
                <span className={className} key={index}>{part.text}</span>
              );
            })
          }
        </span>
      </span>
    );
  },

  render() {
    const { value, suggestions } = this.state;
    const inputProps = {
      value,
      placeholder: 'Enter programming language...',
      onChange: this.onChange,
    };

    return (
      <div>
        <Autosuggest
          suggestions={suggestions}
          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
          getSuggestionValue={this.getSuggestionValue}
          renderSuggestion={this.renderSuggestion}
          inputProps={inputProps} />
      </div>
    );
  },
});

然后只需使用<Example />呈现自动提示字段。

使用Meteor 1.4.1.1进行测试

meteor react-autosuggest - 缺少类属性转换

1 个答案: