javascript - React 警告带有键子项的匿名 div 包装器上缺少键

Question

鉴于此代码，React 会抛出警告，指出包装 div 上没有指定唯一键，尽管不需要它，因为所有子组件都指定了键。

class exampleComponent extends React.Component {
  render() {
    return (
      <div>
        {this.state.data.map(({uniqueId, xData}) => {
          const bar = xData.map(({id}) => (
            <X key={id}/>
          ));

          const foo = <foo key={uniqueId}/>;

          return (
            <div> { /* No key in here, as it's not needed. Throws a warning */}
              {foo}
              {bar}
            </div>
          );

        });
        }
      </div>
    );

  }
}

Answer 1

而不是设置 key支持<foo />组件，您应该设置为父组件 <div> .

工作示例:

class exampleComponent extends React.Component {
  render() {
    return (
      <div>
        {this.state.data.map(({uniqueId, xData}) => {
          const bar = xData.map(({id}) => (
            <X key={id}/>
          ));

          return (
            <div key={uniqueId}>
              <foo />
              {bar}
            </div>
          );
        });
        }
      </div>
    );
  }
}