使用 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>
  );
}

编辑
作为您评论的后续行动：

我希望它访问“products.desserts.cakes.cake1.name”

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

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

Answer 2

如果您尝试输出字符串products.desserts.someValue.name，那么这将起作用：

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

你所拥有的也可以，但是这更干净一些。

如果你想输出变量products.desserts.someValue.name，那么你可以这样做：

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

基本上，只将实际动态的部分视为动态，将其余部分视为正常变量。

Answer 3

一些陷阱：

1. 组件必须返回一个反应元素（在 JSX 中基本上是一个 div 、 span 等）或 null。确保您返回一个且仅一个反应元素，而不是多个。如果还有更多，请将它们包装成一个并返回包装器。

2. 如果你给出的代码是从组件返回的，你可以这样做：

   const items= this.props.auth.cart.map((item, index) => {
              let val = products.desserts[this.props.user.cart[index]];
              return (
                   <div>
                        {val && val.name}
                  </div>
              );
   });
   

然后只返回包装在 div 中的项目。

Answer 4

删除字符串引号并将您的 JSX 包裹在 {}:

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