Est-il possible d'utiliser async / attendre dans Réagir JS?

Question

J'ai commencé à programmer dans React Native, et je me suis habitué à utiliser la syntaxe:

Mais je ne sais pas comment le rendre compatible avec React JS et React Native dans un package partagé. Comment puis-je y parvenir pour que cela fonctionne dans les deux plates-formes?

Merci!

Answer 1

Si vous construisez à l'aide de create-réagir-application, elle est disponible depuis la v0.2.3

https://github.com/facebookincubator/create-react-app/releases/tag/v0.2.3

Il peut être utilisé à l'intérieur d'un Composant comme ceci

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { message: '' };
  }

  async componentDidMount() {
    this.setState({ message: 'loading...' });
    let d = await getData('/posts/1');
    this.setState({ message: d });
  }

  render() {
    let { message } = this.state;
    return (
      <div className="App">
        <p className="App-intro">
          { message }
        </p>
      </div>
    );
  }
}

Voir:

https://github.com/facebookincubator/create-react-app/issues/1024

Answer 2

Réagir Natif livré avec Babel et certains Babel presets, alors que de Réagir sur le web est juste Réagir le code associé.

Si vous souhaitez utiliser async/await sur le web aujourd'hui, vous aurez besoin de Babel et de la bonne transforme: https://babeljs.io/docs/plugins/transform-async-to-generator/

ou la scène-1 presets, ce qui est assez commun dans Réagissent les applications d'aujourd'hui. http://babeljs.io/docs/plugins/preset-stage-1/

Answer 3

Alternativement, vous pouvez utiliser Typescript.

Depuis la version 2.1, il est possible d'utiliser `` et de transmpiler directement à ES5 (en d'autres termes, l'avoir exécuté sur tous les navigateurs)