React 传递多个属性和子项

Question

我是 React、typescript 和 nextjs 的新手，我正在尝试将多个属性传递给一个组件。但是，我似乎覆盖了它们。

例如，我的 _app.tsx

中有这个

function App({ Component, myProps }: MyAppProps): JSX.Element {
  const { ...props } = myProps;
  return (
    <MyStateProvider>
          <Component {...props} />{' '}
    </MyStateProvider>
  );
}

在 MyStateProvider 中，我在 my-state-context.tsx

中有这个

export const MyStateProvider: React.FC<any> = ( {children}) => {
  const contextValue = doSomething();
  return (
    <MyStateContext.Provider value={contextValue}>
      {children}
    </MyStateContext.Provider>
  );
};

但是，我希望在我的 _app.tsx

中有这样的东西

function App({ Component, myProps }: MyAppProps): JSX.Element {
  const { ...props } = myProps;
  return (
    <MyStateProvider {...props}>
          <Component {...props} />{' '}
    </MyStateProvider>
  );
}

而这个 MyStateProvider 在 my-state-context.tsx

export const MyStateProvider: React.FC<any> = ( props, {children }) => {
  const contextValue = doSomething(props); // <-- trying to accomplish passing props
  return (
    <MyStateContext.Provider value={contextValue}>
      {children}
    </MyStateContext.Provider>
  );
};

解决这个问题的正确方法是什么？

Answer 1

您可以执行以下操作：

function App({ Component, ...myProps }: MyAppProps): JSX.Element {
  return (
    <MyStateProvider {...myProps}>
      <Component {...myProps} />
    </MyStateProvider>
  );
}

并且在您的提供商中，假设您正在传递这样的组件 <MyStateProvider Children={SomeComponent}/>

// note that first letter of Children should be uppercase to behave as a component
export const MyStateProvider: React.FC<any> = ({Children, ...props}) => {
  const contextValue = doSomething({...props});
  return (
    <MyStateContext.Provider value={contextValue}>
      <Children />
    </MyStateContext.Provider>
  );
};

见the example

React 传递多个属性和子项

React pass multiple properties and children

typescript

reactjs

next.js