Hoc + props.children 實現React中的佔位組件

先看下這段代碼：

class App extends Component { render() { return ( <div> <div>1</div> <div>2</div> <div>3</div> </div> ) }}

如果我想顯示3個div，必須在最外層包裹一個容器，有時候，做flex布局，或者一些其他情況，我並不希望最外層多出這麼一個div，有沒有什麼好辦法呢？

首先，可以使用數組保存JSX來解決這個問題：

class App extends Component { render() { return ( [ <div key="one">1</div>, <div key="two">2</div>, <div key="three">3</div> ] ) }}

這樣寫即可，但是要注意，如果用數組保存JSX做渲染的時候，一定要給每個JSX片段加key值。

當然，還可以用高階組件來解決這個問題：

function Decorator(props) { return props.children}class App extends Component { render() { return ( <Decorator> <div>1</div> <div>2</div> <div>3</div> </Decorator> ) }}

巧妙的借用了props.children的數組特性，這樣三個div一樣會被正常渲染，同時外部也不需要額外加一個div包裹元素了。

然後，在16.2的React中，官方推出了Fragment這個內容，代碼還可以變成這個樣子：

import { Fragment } from Reactclass App extends Component { render() { return ( <Fragment> <div>1</div> <div>2</div> <div>3</div> </Fragment> ) }}

甚至可以進一步簡化：

class App extends Component { render() { return ( <> <div>1</div> <div>2</div> <div>3</div> </> ) }}

但是這個語法，需要大家自己升級下babel， Eslint這樣的工具，具體新語法，參考：