props 操作小技巧
1， 抽象 props 抽象 props 一般用于跨层级传递 props，一般不需要具体指出 props 中某个属性，而是将 props 直接传入或者抽离道子组件中。
2，混入 props
function Son(props) { console.log(props) return <div>hello,wowld</div> } function Father(props) { const fatherProps = { mes: 'let us learn React', } return <Son {...props} {...fatherProps} /> } function Index() { const indexProps = { name: 'alien', age: '28', } return <Father {...indexProps} /> }
结果：
Father组件一方面直接将Index组件的IndexProps抽象传递给了Son组件，一方面也混入了自己的fatherProps
3，抽离Props
有时候如果要从父组件Props中抽离某个属性，再传递给子组件。
function Son(props) { console.log(props) return <div>hello,world</div> } function Father(props){ const {age,...fatherProps} = props return <Son {...fatherProps}></Son> } function Index () { const indexProps = { name: 'zhaomin', age: '29', mes: 'let us learn React!' } return <Father {...indexProps}></Father> }
打印结果
4，注入props
a. 显式注入props（指的就是能够直观看见标签中绑定的props）
function Son(props){ console.log(props) // name: zhaomin age: 28 return <div>hello,world</div> } function Father (props) { return props.children } function Index () { return <Father> <Son name="zhaomin" age="28"></Son> </Father> }
b.隐式注入 props （指的是通过React.cloneElement 对props.children 克隆再混入新的props）
function Son (props) { console.log(props) // name: zhaomin age: 28 mes: 这是测试de return <div>hello,world</div> } function Father (props) { return React.cloneElement(props.children,{mes: '这是测试de'}) } function Index () { return <Father> <Son name="zhaomin" age="28"></Son> </Father> }
关于props.children的操作
打印效果
上述代码中，Container 为父级组件，Children为子级组件，父级组件嵌套子级组件的时候，在父级组件中可以通过props.children获取到父组件下的子级组件的元素。
代码为:
props.children.map || props.children.forEach
在获取到子元素后通过React.cloneElement 将数据混入props中。
