Question

我是React的新手，但不是JS。这是一段我无法理解的代码

// @flow

import React, { Component } from 'react';
import ShowCard from './ShowCard';
import Header from './Header';

class Search extends Component {
  state = {
    searchTerm: ''
  };
  props: {
    shows: Array<Show>
  };
  handleSearchTermChange = (event: SyntheticKeyboardEvent & {target: HTMLInputElement}) => {
    this.setState({ searchTerm: event.target.value });
  };
  render() {
    return (
      <div className="search"></div>
    );
  }
}

export default Search;

在课堂上有state = ...和props: {..等词组。还有render(){}和handleSearchTermChange = (...等函数定义。我记得所有这些有效的ES6都是render。它是如何工作的？如果我切换分配给state/props的数据的方式 - 一切都会刹车。我认为它是某种babel插件，是吗？

Answer 1

是的，你是对的。

react文档通常通过constructor() {}对象定义状态。但是，在某些项目中，我们可以通过state = {}完成此操作。由于名为Class properties transform的Babel转换器，这种简写语法是可能的。

反应属性/函数赋值/声明

1 个答案: