props.children

简单的“插槽”

const Welcome = (props) => {
  return (
    

     
 Welcome to {props.addr}
 // Welcome to china
      
 Welcome to {props.children}
 // Welcome to china
    
  )
}

const App = () => {
  return (
    
      china
    
  )
}

children可以是任何合法的 js 表达式

具名“插槽”

这里children是一个对象，children的属性就是具名的“插槽”

const Welcome = (props) => {
  return (
    

      
{props.title}
           // Welcome
      
{props.children.title}
 // Welcome
      
{props.children.body}
   // Welcome to china
    
  )
}

const App = () => {
  return (
    
      {{
        title: 'Welcome',
        body: 'Welcome to china'
      }}
    
  )
}

作用域“插槽”

children也可以是一个函数，通过给children`传参，传递作用域的属性。

const Welcome = (props) => {
  const message = {
    a: {
      name: 'aixi',
      age: 16
    },
    b: {
      name: 'lili',
      age: 18
    }
  }
  return (
    

      {props.children(message[props.role])}
    
  )
}

const App = () => {
  return (
    
      {
        ({ name, age }) => {
          return (
            
name:{name},age:{age}
          )
        }
      }
    
  )
}

修改children

假如传递给props.children的是组件，只能使用React.cloneElement(ar1,ar2)生成新的组件，参数1是要克隆的对象，参数2是要设置的属性。

const App = () => {
  return (
     // 处理之后，只需要在这里设置name属性即可
      react
      vue
      angular
    
  )

}
const Radio = ({ children, ...rest }) => {
  return (
    
      {children}
    
  )
}
const RadioGroup = (props) => {
  return (
    

      {
         // 假如是 props.children 无法修改接收name属性
        React.Children.map(props.children, radio => {
          return React.cloneElement(radio, { name: props.name })
       })
      }
    
  )
}