Reactjs 如何在Resact to set state中使用计算属性名

如何使用计算属性名获取react中的状态

我的意思是，一个代码可以说1000多个单词：

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export default class Home extends Component {
  state = {
    name: 'joao',
    age: 18
  }
  set = (s, v) => {
      this.setState({
          [s]: v
      })
  }
  get = (s) => {
    // ---------- <HERE> ----------
    //return this.state.[s];
    // ---------- </HERE> ----------
    // ---------- <INSTEAD OF> ----------
    if(s == 'name') return this.state.name;
    else if(s == 'age') return this.state.age;
    // ---------- </INSTEAD OF> ----------
  }
  render() {
    return(
      <div>
        <h1>Home</h1>
        <button onClick={() => this.set('name', 'maria')}>Change Name</button>
        <button onClick={() => this.set('age', 20)}>Change Age</button>
        <br/>{this.get('name')}
        <br/>{this.get('age')}
        <br/><Link to="/news">Go to NEWS</Link>
      </div>
    );
    };
}

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
导出默认类Home extends组件{
状态={
姓名：“joao”，
年龄:18
}
集合=（s，v）=>{
这是我的国家({
[s] ：v
})
}
get=（s）=>{
// ----------  ----------
//返回此.state[s]；
// ----------  ----------
// ----------  ----------
如果（s=='name'），则返回this.state.name；
否则，如果（s=='age'）返回this.state.age；
// ----------  ----------
}
render（）{
返回(
家
this.set（'name'，'maria'）}>更改名称
this.set（'age'，20）}>更改年龄

{this.get（'name'）}

{this.get（'age'）}

去看新闻
);
};
}

集合正在工作，但是get，我无法仅使用[]获取状态的值

---

此代码只是一个示例

，因为This.state是一个对象，所以可以使用多种语法访问对象的属性，如：

objectName.property//person.age

objectName[“property”]//person[“age”]

objectName[expression]//x=“age”；人[x]

您的解决方案是：

get = (s) => {
    return this.state[s];
  }

or just on JSX

<br/>{this.state.name}
<br/>{this.state.age}

get=（s）=>{
返回此。状态[s]；
}
或者只是在JSX上

{this.state.name}

{this.state.age}

React不像其他JavaScript框架（如Angular或Vue）那样具有计算属性，换句话说，React中没有计算属性，但是我们可以通过使用函数实现这种行为或效果，一种方法是使用函数。由于handleChange（）函数在每次击键时都会运行以更新React状态，因此显示的值将随着用户的键入而更新。看一看旁边

---

返回此.state[s]
handleChange(e){
       this.setState({[e.target.id]: e.target.value })
}