react之Fragment

Posted 2020-11-24 let423

React中的常见模式是一个组件返回多个元素。Fragments允许将子列表分组，而无需向DOM添加额外节点

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

动机

不想打乱原有的DOM结构或者不想在组件外层包裹额外的元素的时候可以使用Fragments，Fragments不会生成额外的DOM节点

用法

1. 显式用法

class Columns extends React.Component {
    render() {
        return (
            <React.Fragment>
                <td>Hello</td>
                <td>World</td>
            </React.Fragment>
        )
    }
}

import {Fragment} from 'react';
……
return (
    <Fragment>
        <WrappedComponent {...newProps} ref={this.wrapperRef} />
        <GoTop imgUrl />
    </Fragment>
);
……

使用显示<React.Fragment>语法声明的片段可能具有key，key是目前唯一可以传递给Fragment的属性

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 没有`key`，React 会发出一个关键警告
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

2. 短语法

注意：短语法用法不支持key或属性

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}