Question

与localstorage的变量相关组件

2019-06-11

45

javascript reactjs

所以我有一个非常简单的组件：

const in_cart = (
    <CartItems>
    <ItemInCart>
      <InCartFont>{ITEM NAME}</InCartFont>
      <CartRemove>
        <CartX>x</CartX>
        <br></br>
        remove
      </CartRemove>
    </ItemInCart>
  </CartItems>)

我想知道是否有办法像这样使用它：

function App() {
  let items_in = JSON.parse(localStorage.getItem('products')).length;
  for (i = 0; i === items_in; i++) {
    return (
      in_cart(i)
    )
  }
};

ReactDOM.render( <App />, document.getElementById('root'));

console.log(JSON.parse(localStorage.getItem('products')) 给出以下内容：

(10) [{…}, {…}, {…}, ... , {…}]
0: {itemName: ""}
1: {itemName: ""}
2: {itemName: ""}
3: {itemName: ""}
4: {itemName: "Blekk BROTHER LC1280XLC blå"}
5: {itemName: "Blekk BROTHER LC1280XLM rød"}
6: {itemName: "Blekk BROTHER LC1280XLY gul"}
7: {itemName: "Blekk BROTHER HCBK 30K sort"}
8: {itemName: ""}
9: {itemName: ""}
10: {itemName: ""}

我想用从本地存储读取的 {ITEM NAME} 来呈现我的组件，我猜是这样的：

let {ITEM NAME} = JSON.parse(localStorage.getItem('products'))[i]

Answer 1

您快完成了：

function CartItem(props) {
  return (
    <ItemInCart>
      <InCartFont>{props.item.itemName}</InCartFont>
      <CartRemove>
        <CartX>x</CartX>
        <br></br>
        remove
      </CartRemove>
    </ItemInCart>
  );
}

function App() {
  // don't need the length here, let's just get the items
  let items = JSON.parse(localStorage.getItem('products'));

  // since we have an array, we can map over every item
  return (
    <CartItems>
      {items.map((item, index) => {
        return <CartItem item={item} key={index} />
      })}
    </CartItems>
  );
};

ReactDOM.render( <App />, document.getElementById('root'));

我假设您的 JSX 中的所有其他组件都是真实组件，并且我不会编辑任何其他内容。

Answer 2

这是一个沙盒示例： https://codesandbox.io/s/dreamy-edison-nep4e

注释在代码中，但简要说明如下：

Array.prototype.map 是在 React 中显示项目列表的最便捷方式
您可以使用短路有条件地显示列表中的项目
React 需要列表中的每个项目都有一个键，以便知道哪个是哪个。
如果您要渲染组件，则它必须有一个大写名称。这就是 React 知道它是一个组件而不是 html 元素/自定义 Web 组件的方式。
每当您想将数据传递给组件时，都可以使用 props 来实现！