反应本地-将状态分配给const

时间:2019-12-30 15:41:09

标签: javascript reactjs react-native react-native-paper

我从React native开始,当使用一个名为react native paper的库时,我遇到了一条语句,其中状态被分配给const,如下所示。

import * as React from 'react';
import { Searchbar } from 'react-native-paper';

export default class MyComponent extends React.Component {
  state = {
    firstQuery: '',
  };

  render() {
    const { firstQuery } = this.state;
    return (
      <Searchbar
        placeholder="Search"
        onChangeText={query => { this.setState({ firstQuery: query }); }}
        value={firstQuery}
      />
    );
  }
}

从“ Render”方法开始,您可以看到const {firstQuery} = this.state; 有人可以解释为什么将状态分配给名为“ firstQuery”的常量,即使有原因,分配如何将状态对象内的属性“ firstQuery”正确映射到const?

先谢谢了。该代码示例来自https://callstack.github.io/react-native-paper/searchbar.html#value

2 个答案:

答案 0 :(得分:4)

该语法既不是React,也不是React Native。这只是Javascript的语法,称为解构。

const { firstQuery } = this.state;

等同于

const firstQuery = this.state.firstQuery;

只是一种简写的快捷方式语法,您看到2个firstQuery s 吗?人们只是不想在代码中使用重复,所以他们发明了它。


请参见下面的 vanilla javascript 代码段:

const object = {
  name: 'Aby',
  age: 100,
}

const { name, age } = object;
// instead of 
// const name = object.name;

console.log(name, age);
console.log(object.name, object.age);

//=========================================
// imagine:
const obj = {
  veryLongPropertyNameToType: 420
}

const { veryLongPropertyNameToType } = obj;
// instead of
// const veryLongPropertyNameToType = obj.veryLongPropertyNameToType;

答案 1 :(得分:1)

就像提到的另一个答案一样,它只是JavaScript语法,也就是解构。如果您感到困惑并希望仅使用“香草” JavaScript语法,则可以在下面查看。

import * as React from 'react';
import { Searchbar } from 'react-native-paper';

export default class MyComponent extends React.Component {
  state = {
    firstQuery: '',
  };

  render() {
    return (
      <Searchbar
        placeholder="Search"
        onChangeText={query => { this.setState({ firstQuery: query }); }}
        value={this.state.firstQuery} // <<<<<<<<<<< LOOK HERE
      />
    );
  }
}