当前位置: 首页 > 面试题库 >

为什么要在构造函数之外设置React Component的状态?

蓝侯林
2023-03-14
问题内容

所以我只是从React框架下载了源代码,并且在Terminal中遇到了这个错误:

  ERROR in ./src/components/TextEditor.js
  Module build failed: SyntaxError: Unexpected token (24:8)

  22 | 
  23 |   // Set the initial state when the app is first constructed.
> 24 |   state = {
     |         ^
  25 |     state: initialState
  26 |   }
  27 |

我的问题是,人们为什么要像这样设置React Component的状态?如果对某些人出错,会有什么好处?另外,是否可以使用Babel预设或插件来防止此错误?

这是我通常设置组件状态的方式,从我所看到的情况来看,这是常规的:

constructor() {
  super();
  this.state = {
    state: initialState
  };
}

作为记录,这是整个文档:

// Import React!
import React from 'react'
import {Editor, Raw} from 'slate'

const initialState = Raw.deserialize({
  nodes: [
    {
      kind: 'block',
      type: 'paragraph',
      nodes: [
        {
          kind: 'text',
          text: 'A line of text in a paragraph.'
        }
      ]
    }
  ]
}, { terse: true })

// Define our app...
export default class TextEditor extends React.Component {

  // Set the initial state when the app is first constructed.
  state = {
    state: initialState
  }

  // On change, update the app's React state with the new editor state.
  render() {
    return (
      <Editor
        state={this.state.state}
        onChange={state => this.setState({ state })}
      />
    )
  }

}

问题答案:

第一个示例使用的类属性不属于ES6规范。您可以使用stage-2预设或babel-plugin-transform-class- properties插件模块将它们与babel一起使用。

用法主要是优先考虑的问题,并且在使用babel进行转堆时,将产生与第二个示例相同的结果。

https://babeljs.io/repl/#?evaluate=true&lineWrap=false&presets=react%2Cstage-0&experimental=false&loose=false&spec=false&code=%2F%2F%20Code%20goes%20here%0Aclass%20First%20%7B%0A
%20%20state%20%3D%20%7B%0A%20%20%20%20value%3A%20true%0A%20%20%7D%0A%7D%3B%0A%0Aclass%20Second%20%7B
%0A%20%20constructor%20()%20%7B%0A%20%20%20%20this.state%20%3D%20%7B%0A%20%20%20%20%20%20%20value%3A
%20true%0A%20%20%20%20%7D%3B%0A%20%20%7D%0A%7D%3B%0A




 类似资料:
  • 问题内容: 这有任何重要目的吗?可以省略吗? 问题答案: 并非总是必要的,但是它确实有其用途。假设我们想在基类上创建一个复制方法。像这样: 现在,当我们创建一个新的并复制它时会发生什么? 该副本不是的实例。这是因为(没有显式检查),我们无法从“基本”类返回副本。我们只能返回。但是,如果我们重置了构造函数: …然后一切都按预期进行:

  • 问题内容: 我对此代码有疑问:https : //github.com/reactjs/redux/blob/master/examples/async/containers/App.js 特别: 我猜这是一个两部分的问题。 为什么我需要将句柄更改设置为类的实例,我不能只对handleChange使用静态函数并直接在类中调用它 ? 我不知道这是怎么回事: 谢谢 问题答案: 以相反的顺序回答… 返回

  • 问题内容: 必须使用无参数构造函数(像Hibernate这样的工具会在此构造函数上使用反射来实例化对象)。 我得到了这个手挥手的答案,但是有人可以进一步解释吗?谢谢 问题答案: hibernate,并且通常通过反射创建对象的代码用于创建类的新实例。此方法需要一个公共的无参数构造函数才能实例化该对象。对于大多数用例,提供无参数构造函数不是问题。 有一些基于序列化的技巧可以解决没有no-arg构造函数

  • 问题内容: 我正在处理一个扩展的类。 这不是我的代码,它在开始构造GUI之前先进行调用。我想知道为什么要这样做,因为我一直只访问超类的方法而不必调用; 问题答案: 对于具有父级的所有类(这是Java中每个用户定义的类),都有一个不带参数的隐式调用,因此通常不需要显式调用。但是,如果父级的构造函数接受参数,并且你希望指定它们,则可以使用参数调用。此外,如果父级的构造函数接受参数,并且没有默认的无参数

  • 问题内容: 我知道Go没有任何构造函数,而是在其中使用a ,但是根据此示例。 他们总是回来。为什么仅仅返回就还不够? 更新资料 我尝试过为简单的结构返回创建的对象,这很好。因此,我想知道返回地址是否是构造函数的标准方法或其他方法。 谢谢。 问题答案: 如前所述,是的,规范允许您返回值(作为非指针)或指针。这只是您必须做出的决定。 什么时候返回指针? 通常,如果您返回的值作为指针“更有用”。什么时候

  • 一个更一般的问题。如果在常规Spring托管类中使用构造函数注入,则这些类将自动连接,而不需要@autowired注释,即: 在@SpringBootTest类中遵循相同的构造函数注入原则,您需要将@Autowired注释设置为构造函数参数,否则它将无法注入该类,即: 为什么会出现这种差异?