平常我們在react使用children的用法大多都是和vue的slot插槽那樣去使用否彩，但是react中的children還是有很多有趣的用法疯攒，我們寫一些小的demo來看看。

在vue中預(yù)留位置插入dom可以用slot占位列荔，而且vue中的slot還有一個(gè)特殊的功能是具名插槽敬尺。這個(gè)功能在react的children中就不具備了，如果非要用那就用一個(gè)自定義屬性傳過來效果也是一樣的比如說：

function Comp1(){
  const header = <div>這是header</div>
  return <Comp2 header={header}></Comp2>
}
function Comp2( { header:Header } ){
  return Header
}
export default Comp1

展示效果如下：

1.png

不過平常我們開發(fā)時(shí)主要是這么用：

function Comp1(){
  return <Comp2><h1>這是Comp1組件</h1></Comp2>
}
function Comp2( props ){
  return <div>{props.children}</div>
}
export default Comp1

2.png

一樣沒問題贴浙。

那么如果我們把children當(dāng)作一個(gè)函數(shù)呢代碼修改如下:

const fn = {
  getInfo(){
    return {name: "react", total: "100000+"}
  }
}
function Comp1(){
  return (
    <Comp2 name="getInfo">
      {({name, total}) => (
        <div><p>框架：{name}</p><p>學(xué)習(xí)人數(shù)：{total}</p></div>
      )}
    </Comp2>
  )
}
function Comp2( {name, children} ){
  const info = fn[name]();
  return children(info)
}
export default Comp1

效果如下：

3.png

我們發(fā)現(xiàn)他也可以作為方法來執(zhí)行砂吞。

接下來看下children的過濾效果：

function Comp1(){
  return (
    <Comp2 type="div">
      <div>1-div</div>
      <div>2-div</div>
      <p>3-p</p>
      <div>4-div</div>
      <p>5-p</p>
   </Comp2>
)}
function Comp2( props ){
  return (
    <div>{
     React.Children.map(props.children,child => {
          if(child.type == props.type){
            return child
          }
          return ""
      })}
  </div>
  )}
export default Comp1

展示效果如下：

4.png

最終我們過濾出所有的div展示出來。

接下來我們給children里面的組件添加屬性

function Input({children, ...rest}){
  return <label htmlFor=""><input {...rest} type="checkbox" />{children}</label>
}
function InputGroup(props){
  return (
    <div>
      {
        React.Children.map(props.children, child => {
          return child.checked = true//直接給組件添加一個(gè)checked屬性
        })
      }
    </div>
  )
}
function Addattr(){
  return (
    <InputGroup>
      <Input>體育</Input>
      <Input>財(cái)經(jīng)</Input>
    </InputGroup>
  )
}
export default Addattr;

我們直接給組件添加一個(gè)checked屬性崎溃，查看頁面效果

5.png

發(fā)現(xiàn)報(bào)錯(cuò)了呜舒，react不允許我們這樣直接添加屬性，要解決這個(gè)問題需要用到react的一個(gè)方法React.cloneElement,我們修改一下我們的代碼

function Input({children, ...rest}){
  return <label htmlFor=""><input {...rest} type="checkbox" />{children}</label>
}
function InputGroup(props){
  return (
    <div>
      {
        React.Children.map(props.children, child => {
          return React.cloneElement(child,{checked: true})//這次我們通過React.cloneElement添加屬性
        })
      }
    </div>
  )
}
function Addattr(){
  return (
    <InputGroup>
      <Input>體育</Input>
      <Input>財(cái)經(jīng)</Input>
    </InputGroup>
  )
}
export default Addattr;

查看頁面效果

6.png

7.png

發(fā)現(xiàn)添加成功笨奠。