在使用HOC进行反应时向包装组件渲染道具

Question

I was looking at the react documentation for Higher-Order Components and I stumbled upon an example where you can log props, for a specific component

function logProps(WrappedComponent) {
return class extends React.Component {
    componentWillReceiveProps(nextProps) {
      console.log('Current props: ', this.props);
      console.log('Next props: ', nextProps);
    }
    render() {
      // Wraps the input component in a container, without mutating it. Good!
      return <WrappedComponent {...this.props} />;
    }
  }
}

when you render the component is there a difference between inserting

{...this.props} 

and

{props.children}

they would both essentially return the given props to the component, is there a best practice or a specific use case where when is better than the other?

From the react docs about props.children

 you can use props.children on components that represent ‘generic boxes’ and that ‘don’t know their children ahead of time’. 

to me this seems like the same use case as in {...this.props}

Answer 1

{...this.props} and props.children are used for achieving different objectives.

{...this.props} is used so that all the props given to this specific component are spread onto another. Taking an example from the docs :

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

These two cases have the same results. So, spread is best approach for passing on props from an HOC.

props.children on the other hand is used to pass on children to another component. This is one specific prop that React assigns that you cannot explicitly find among attributes. This prop is present inside the opening and closing tag of a component. Another example from docs :

<MyComponent>Hello world!</MyComponent>

// Can be used in the component as:
function MyComponent() {
  return (
    <div>{props.children}</div>
  );
}

Here, MyComponent will emit <div>Hello World</div> to the DOM.