React-片段示例

import React from'react';

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

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

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

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

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

export {Table, ColumnsThree, ColumnsTwo, Columns, Glossary};

import { Columns, ColumnsTwo, ColumnsThree, Glossary, Table } from "./FragmentExample";
import React from "react";

const items = [{
    id: 1,
    term: 'termA',
    description: 'descA'
},{
    id: 2,
    term: 'termB',
    description: 'descB'
},{
    id: 3,
    term: 'termC',
    description: 'descC'
}]

export default function FragmentExampleTwo() {
    return (
        <div>
            <h3>Fragments示例</h3>
            <Table />
            <hr/>
            <h3>Columns</h3>
            <Columns />
            <hr/>
            <h3>ColumnsTwo</h3>
            <ColumnsTwo />
            <hr/>
            <h3>ColumnsThree</h3>
            <ColumnsThree />
            <hr/>
            <h3>Glossary</h3>
            <Glossary items={items} />
        </div>
    )
}

import FragmentExampleTwo from './FragmentExampleTwo';

export default function FragmentExampleIndex(){
    return(
        <FragmentExampleTwo />
    );
    
}