react将组件打平，避免组件间的深嵌套，优化props的深度传递

import React from "react";
const style = {
  border:'1px solid #0f0',
  padding:'10px'
}
const ParentPage = () => {
  const parent_data = {name:'我是父亲组件里的数据'}
  return <div style={style}>
  这是父组件
  <Apage>
    <Bpage parent_data={parent_data} />
  </Apage>
  </div>
}

const Apage = ({children}) => {
  const a_page_data = {
    name:'我是A组件里的数据'
  }
  return <div style={style}>
  这是Apage组件
  {React.cloneElement(children, { a_page_data })}
  </div>
}

const Bpage = ({parent_data, a_page_data}) => {
  return <div style={style}>
  <p>{'这是Bpage组件'}</p>
  <p>{'父组件数据:'+parent_data.name}</p>
  <p>{'A组件数据:'+a_page_data.name}</p>
  </div>
}
export default ParentPage;