在React组件中组合已定义属性的最佳方法

function ParentComponent(props) {
  return <ChildComponent {...props} />;
}

function withAdditionalProps(WrappedComponent) {
  return function(props) {
    return <WrappedComponent {...props} additionalProp="value" />;
  };
}

const EnhancedComponent = withAdditionalProps(ChildComponent);

class ParentComponent extends React.Component {
  render() {
    return (
      <ChildComponent render={(additionalProps) => (
        <GrandchildComponent {...this.props} {...additionalProps} />
      )} />
    );
  }
}

const MyContext = React.createContext();

function ParentComponent(props) {
  return (
    <MyContext.Provider value={{ additionalProp: 'value' }}>
      <ChildComponent {...props} />
    </MyContext.Provider>
  );
}

function ChildComponent(props) {
  const context = React.useContext(MyContext);
  return <GrandchildComponent {...props} {...context} />;
}

<ChildComponent {...parentProps} {...additionalProps} />

const MemoizedComponent = React.memo(ChildComponent);

const MyContext = React.createContext();

function ParentComponent(props) {
  const [state, setState] = React.useState({});
  const value = React.useMemo(() => ({ state, setState }), [state, setState]);
  return (
    <MyContext.Provider value={value}>
      <ChildComponent {...props} />
    </MyContext.Provider>
  );
}