时间戳

首页 > 解决方案 > 如何在 React 中使用计算属性名称来设置状态

reactjs - 如何在 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>
    );
    };
}

该集合正在工作，但是获取，我无法仅使用 [] 获取状态值 此代码只是一个示例

标签： reactjs

解决方案

由于 this.state 是一个对象，因此您可以使用多种语法来访问对象的属性，例如：

objectName.property // 人物年龄

objectName["property"] // 人["age"]

objectName[表达式] // x = "年龄"; 人[x]

你的解决方案是：


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

or just on JSX

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

推荐阅读