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

修改
作为评论的后续内容：

我希望它能够访问＆＃34; products.desserts.cakes.cake1.name＆＃34;

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

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

一个简单的例子：

＆＃13;
＆＃13;
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) });
＆＃13;
＆＃13;
＆＃13;

Answer 2

删除字符串引号并将您的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>
  );
}

Answer 3

如果您尝试输出字符串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 4

一些问题：

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

如果从组件返回您提供的代码，您可以执行以下操作：

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中的项目。

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

4 个答案: