javascript - 使用 React，如何使变量的值动态化？

Question

我希望能够做到这一点:

for(let i = 0; i < this.props.user.cart.length; i++) {
  return (
    <div>
      {"products.desserts." + this.props.user.cart[i] + ".name"}
    </div>
  );
}

让 JSX 将其读取为对我的 json 的调用。相反，它只是吐出一个字符串。

它给出的字符串是 products.desserts.cakes.cake1.name，如果它实际访问我的 json 文件中的名称，这是正确的。

我看过一些关于动态变量名的资料，但我不确定这是否是正确的方向，因为我在尝试时不断遇到错误。 (顺便说一下，对 React 很陌生)

Answer 1

您可以使用字符串而不是点 . 访问对象键。

for(let i = 0; i < this.props.auth.cart.length; i++) {
  return (
    <div>
      {products.desserts[this.props.user.cart[i].name]}
    </div>
  );
}

编辑
作为您评论的跟进:

I want it to be accessing "products.desserts.cakes.cake1.name"

此 cakes.cake1 不是对象的有效键，因此您需要拆分数组中值的 . 并使用双括号。< br/> 所以在你的情况下:

{
  const splitedKeys = this.props.user.cart[i].split(".");
  const key1 = splitedKeys[0];
  const key2 = splitedKeys[1];
  products.desserts[key1][key2].name
}

一个简单的例子:

const products = {
  desserts: {
    cakes: {
      cake1: {
        name: 'cake 1'
      },
      cake2: {
        name: 'cake 2'
      }
    }
  }
}

const cart = ['cakes.cake1', 'cakes.cake2'];

cart.forEach((val) => {
  const splitedKeys = val.split('.'); // split the values by the "."
  const key1 = splitedKeys[0] // left side of the "."
  const key2 = splitedKeys[1] // right side of the "."
  console.log(products.desserts[key1][key2].name)
});