在react官网里发现了这个东西，不知道以后能不呢个用的到，先记一下。

Children Props

这个就很常见了，在使用的时候嵌套组件进去，在Sidebar 或是 Dialog里比较常用到。

  2. function OtherOne(props){
  3.   return<div style={{background:"orange"}}>
  4.     <span>other one</span>
  5.     {props.children}
  6.   </div>
  7. }
  10. class Zuhe extends React.Component{
  11.   constructor(props){
  12.     super(props);
  13.   }
  14.   render(){
  15.     return<div>
  16.       <OtherOne>
  17.           <h1>组合1</h1>
  18.       </OtherOne>
  19.     </div>
  20.   }
  22. }

Other Props

我比较愿意称它们为奇怪的props，先看代码

  2. class Zuhe extends React.Component{
  3.   constructor(props){
  4.     super(props);
  5.   }
  6.   render(){
  7.     return<div>
  8.       <OtherOne>
  9.           <h1>组合1</h1>
  10.       </OtherOne>
  11.       <OtherTwo
  12.         left={<Left/>}
  13.         right={<Right/>}
  14.         left1 = {<div>left</div>}
  15.         right2 = {<div>right</div>}
  16.       />
  17.     </div>
  18.   }
  20. }
  22. function OtherTwo (props){
  23.   console.log('other two props',props)
  24.   return <div style={{border:'1px solid #eee'}}>
  25.     <span> other two</span>
  26.     <div style={{width:200,height:200}}>
  27.       <div style={{float:"left"}}>
  28.         {props.left1}
  29.       </div>
  31.       <div style={{float:"left"}}>
  32.         {props.left}
  33.       </div>
  35.       <div style={{float:"right"}}>
  36.         {props.right2}
  37.       </div>
  39.       <div style={{float:"right"}}>
  40.         {props.right}
  41.       </div>
  42.     </div>
  43.   </div>
  44. }
  46. function Left (props){
  47.   return <div style={{border:'1px solid red'}}>
  48.       i am left
  49.     </div>
  50. }
  52. function Right (props){
  53.   return <div style={{border:'1px solid green'}}>
  54.     i am right
  55.   </div>
  56. }

我一开始以为只能传 left，right属性，没想到它完全是自定义的。
可以理解为，用props传过去一个组件 😺！！是不是很牛
但是可以这么理解， 之类的react元素本身就是对象（object），可以把它们当作props像其他数据一样传递（来自官网解释）。
好像也挺对的。
我们可以看到此时的props，确实传来的是对象：
image.png

拓展

在上面的内容中，还可以简单窥探下react 元素对象的结构，就是把一些Dom转换成了啥样对像给react解析。
image.png
image.png
一级一级的往下写，文案也算。我以前学过这些的，生气，全忘了，有时间还要再整理出来。