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>
    )
  }
}

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

<h2>{copy.services. $ {this.state.segmentTrigger} .title}</h2>
<h2>{copy.services.${this.state.segmentTrigger}。标题}`
<h2>{copy.services.this.state.segmentTrigger.title}</h2>

这可能吗？我得到前两个的语法错误，第三个没有工作（这对我来说显然是合乎逻辑的，它甚至是一个Hail Mary甚至尝试它，当然没有名为{{的密钥）在this对象中的1}}。

Answer 1

您正在寻找的答案是

原因是您尝试访问<h2>{copy.services[this.state.segmentTrigger].title}</h2>的密钥，但在用户开始点击按钮之前您不会知道您要访问的密钥，以及哪一个密钥您的访问权限将动态决定。

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

copy.services

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

1 个答案: