Question

在我的应用程序中，我需要根据用户安装的产品来加载多个菜单。这就是我正在做的：

renderProductMenus() {
        return (
            <div className="row">
                {this.state.loadedProducts.map(loadedProduct => loadedProduct.state.productMenu)}
            </div>
        );
    }

在这种情况下，

productMenu是一个组件。但是我收到警告

“数组或迭代器中的每个子代都应具有唯一的“键”属性。”

对我来说，最简单的方法是直接将“键”属性添加到这样的组件中：

<ProductMenu key="mykey" />

但是我一直在想这是否可以在加载阶段完成，就像这样：

loadedProduct => loadedProduct.state.productMenu.addProp({key: value})

Answer 1

方法1：

您可以在组件周围添加一个React.Fragment包装器，并为其添加密钥。下面提供了一个示例：

class Main extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        loadedProducts: [ 
        <ProductMenu name = 'Menu1' / >, 
        <ProductMenu name = 'Menu2' / >,
        <ProductMenu name = 'Menu3' / >
        ]
      };
    }

    render() {
      const menuItems = this.state.loadedProducts.map((menu, i) => {
        return (
        <React.Fragment key={i}>
        {menu} 
        </React.Fragment>);
      });
      return (<div>{menuItems}</div>);
      }
    }

    class ProductMenu extends React.Component {
      render() {
        return <div>{this.props.name}</div>
      }
    }

    ReactDOM.render( <Main /> ,
      document.getElementById('root')
    );

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<div id="root" />

方法2：

您可以使用React.cloneElement而不是添加其他包装。

class Main extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        loadedProducts: [ 
        <ProductMenu name = 'Menu 1' / >, 
        <ProductMenu name = 'Menu 2' / >,
        <ProductMenu name = 'Menu 3' / >
        ]
      };
    }

    render() {
      const menuItems = 
      React.Children.map(this.state.loadedProducts, (menu,  i) =>
          React.cloneElement(menu, { key:  i })
      );
      return (<div>{menuItems}</div>);
      }
    }

    class ProductMenu extends React.Component {
      render() {
        return <div>{this.props.name}</div>
      }
    }

    ReactDOM.render( <Main /> ,
      document.getElementById('root')
    );

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<div id="root" />

向保存在变量中的组件添加“键”属性

1 个答案: