React fragments

我们知道一个 react 组件可以呈现(render)很多不同的东西。 唯一真实的条件是它需要返回单个根元素。 所以我们将它包装在一个 div 中，尽管 div 没有任何用途。 现在有时您需要某种根元素。 也许我试图将它设计为一个有凝聚力的容器，但也有一些时候我们不想要那个根元素，它只是妨碍了。

简而言之， 以下代码的 p 和 form 原本放在 <div> 中，现将 div删除，同样 work，下面的空标签（empty tag）用于声明 fragment (片段):

  return (
    <>  // ok
      <p>Add note</p>
      <form onSubmit={addNote}>
        <input value={title} onChange={(e) => setTitle(e.target.value)} />
        <textarea
          value={body}
          onChange={(e) => setBody(e.target.value)}
        ></textarea>
        <button>add note</button>
      </form>
    </>
  );

空标签是简短语法，<React.Fragment> 同样ok。