如何将基于 React 状态的 JavaScript 变量插入到另一个变量中？ [复制]

Question

我有一个 React 组件，它从包含应用程序所需的图像、副本和其他数据的文件中提取。我遇到的问题只是语法问题：如何根据组件的状态引用这些数据？

data.js 看起来像这样（简化版）：

import changingAgents from '../public/images/changing-agents.jpg';
import cta from '../public/images/cta.jpg';
import logo from '../public/images/logo.jpg';

export const images = {
  changingAgents,
  cta,
  logo,
}

export const copy = {
  services: {
    header: 'What are you looking for?',
    firstTimeInvestor: {
      title: 'First-Time Investor Service',
      intro: 'At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque.',
    },
    changingAgents: {
      title: 'Changing Agents',
      intro: 'At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.',
    },
}

这里是组件的相关部分，Services.js：

import { copy, images } from '../../data';

export default class Services extends Component {
  state = {
    segmentTrigger: 'changingAgents',
  }

  changeSegmentTrigger(chosenSegmentTrigger) {
    this.setState({segmentTrigger: chosenSegmentTrigger})
  }

  render() {
    return (
      <div className="services">
        <h2>{copy.services.header}</h2>
        <Section backgroundImage={this.state.segmentTrigger} className="services__segment-triggers" >
          <div className="services__segment-triggers__select">
            <Button color="yellow" onClick={() => this.changeSegmentTrigger('firstTimeInvestor')} label="First-Time Investor" />
            <Button color="yellow" onClick={() => this.changeSegmentTrigger('changingAgents')} label="Changing Agents" />
          </div>
          <div className="services__segment-triggers__info">
            {/* Insert header here! */}
          </div>
        </Section>
      </div>
    )
  }
}

基本上我需要做的是在<div className="services__segment-triggers__info"> 中添加将根据this.state.segmentTrigger 更改的文本。我尝试了一些变体无济于事，例如：

• <h2>{copy.services.${this.state.segmentTrigger}.title}</h2>
• <h2>{copy.services.${this.state.segmentTrigger}.title}`
• <h2>{copy.services.this.state.segmentTrigger.title}</h2>

这可能吗？我得到前两个的语法错误，第三个不起作用（这对我来说显然是合乎逻辑的，即使尝试它也有点像 Hail Mary，因为当然没有名为 this 的键copy.services 对象）。

Answer 1

你正在寻找的答案是

<h2>{copy.services[this.state.segmentTrigger].title}</h2>

原因是您正在尝试访问copy.services 的键，但是在用户开始单击按钮之前，您不会知道要访问的键，以及您访问的键将动态决定.

对象和键在 JavaScript 中的工作方式是，键在技术上是一个字符串，所以使用这个例子：

let x = {
  test1: 4,
  test2: 5,
  'test3': 6
};

x.test1 // is 4
x.test2 // is 5
x.test3 // is 6

x['test1'] // is 4
x['test2'] // is 5
x['test3'] // is 6

const y = 'test1';

x.y // undefined.  we never set a key of y.

x[y] // this is interpreted as x['test1'] so the result is 4