react中使用插槽

react中的插槽

react和vue不一样，没有插槽这个组件，如果要实现这个效果，可以从下面两个角度来实现。

插槽实现方法1

function son(props) {
  return (
    <div>
        <div>
            {props.children[0]}
        </div>
        <div>
            {props.children[1]}
        </div>
        <div>
            {props.children[2]}
        </div>
    </div>
  )
}

function parent(props) {
  return (
    <div>
      <son>
        <div>left</div> <-- 必须一一对应 -->
        <div>center</div>
        <div>right</div>
      </son>
    </div>
  )
}

这种方式实现的元素必须一一对应并且缺一不可。

插槽实现方式2

function son(props) {
  return (
    <div>
      <div>{props.leftNode}</div>
      <div>{props.centerNode}</div>
      <div>{props.rightNode}</div>
    </div>
  )
}

function parent(props) {
   return (
    <div>
      <son 
        leftNode = {<div>left</div>}
        centerNode = {<div>center</div>}
        rightNode = {<div>right</div>}
      />
    </div>
  )
}

这种就可以对应变量对应位置，并且可以为空