Foreword: write a try, at ordinary times development accumulates small skill. Continuously updated ~

## scenario :(one concrete instance, multiple implementations.) React uses this. Props. Children, when children need to use the parent component props

1.React.cloneElemnt

const { children, ... rest } = this.props; let renderHtml; renderHtml = Children.map(children, (element, i) => { return isValidElement(element) && cloneElement(element, { rest, key: i }) }) return renderHtmlCopy the code
  1. Manually integrate props, Child component fixed to Child
const { children, ... rest } = this.props; Children. Map ((Component, index) => {// Current child props const {props = {},} = Component; const { id } = props; const newProps = { ... Rest, // parent props... props } return <Child key={id} {... newProps} /> })Copy the code
  1. The traditional way Context, you can wrap it with higher-order functions
export const context = React.createContext({}); export const ProviderParent = { const { children, closeBtn, ... rest } = props; const { Provider } = context; return ( <div> <div> <Provider value={rest}> {children} </Provider> {closeBtn && <i className={style.closeIcon} OnClick ={props. OnClose} />} </div> </div> </div>)}  return class Enhancer extends Component { render() { const {Consumer} =modalContext; return ( <Consumer>{value => <WrappedComponent {... value} {... This. Props} />}</Consumer>)} // Child Child const Child = (props) => (<div> Child component {props} </div>) export default consumerContext(Child)Copy the code

Thank you for your time. Welcome to correct ~