React函数组件如何传递额外Props？ContextProvider报错求解

这个错误的核心原因是你对React组件的props结构定义有误，同时在传递props的方式上也不符合TypeScript的类型校验规则。下面一步步帮你解决：

1. 修正TodosContextProvider的Props定义 #

React函数组件的props是一个单一的对象参数，你之前把children和props拆成两个独立参数的写法是错误的。我们需要把所有需要接收的属性（包括children）放在同一个props对象里，并用明确的TypeScript接口来约束类型。

方式一：接收特定属性（推荐） #

如果你只需要从Crud组件接收siteUrl这类特定属性，可以先定义对应的Props接口：

import React from 'react';

// 定义Provider接收的props类型
interface TodosContextProviderProps {
  children: React.ReactNode;
  siteUrl: string; // 根据你的ICrudProps实际类型调整，比如可能是string | undefined
}

export function TodosContextProvider({ children, siteUrl }: TodosContextProviderProps) {
  const [todos, dispatch] = React.useReducer(todosReducer, [
    { Id: 1, Title: 'Learn Context API', Done: true },
    { Id: 2, Title: 'Learn TypeScript', Done: true },
    { Id: 3, Title: 'Use Context API with TypeScript', Done: false }
  ]);
  
  console.log(siteUrl); // 现在可以正常访问
  
  return (
    <TodosDispatchContext.Provider value={dispatch}>
      <TodosStateContext.Provider value={todos}>
        {children}
      </TodosStateContext.Provider>
    </TodosDispatchContext.Provider>
  );
}

方式二：接收整个Crud的Props #

如果你需要把Crud组件的所有props都传递过来，可以让Provider的Props接口继承ICrudProps：

import React from 'react';

interface TodosContextProviderProps extends ICrudProps {
  children: React.ReactNode;
}

export function TodosContextProvider({ children, ...crudProps }: TodosContextProviderProps) {
  const [todos, dispatch] = React.useReducer(todosReducer, [
    { Id: 1, Title: 'Learn Context API', Done: true },
    { Id: 2, Title: 'Learn TypeScript', Done: true },
    { Id: 3, Title: 'Use Context API with TypeScript', Done: false }
  ]);
  
  console.log(crudProps.siteUrl); // 访问Crud传递过来的属性
  
  return (
    <TodosDispatchContext.Provider value={dispatch}>
      <TodosStateContext.Provider value={todos}>
        {children}
      </TodosStateContext.Provider>
    </TodosDispatchContext.Provider>
  );
}

2. 修正Crud组件中Provider的使用方式 #

你之前传递<TodosContextProvider props={this.props}>的写法是错误的——因为你的Provider组件并没有定义名为props的属性，TypeScript自然会报错。正确的传递方式分两种：

对应方式一：传递特定属性 #

export default class Crud extends React.Component<ICrudProps, {}> {
  public render(): React.ReactElement<ICrudProps> {
    return (
      <TodosContextProvider siteUrl={this.props.siteUrl}>
        <TodoForm />
        <TodoList />
      </TodosContextProvider>
    );
  }
}

对应方式二：展开整个Props #

export default class Crud extends React.Component<ICrudProps, {}> {
  public render(): React.ReactElement<ICrudProps> {
    return (
      <TodosContextProvider {...this.props}>
        <TodoForm />
        <TodoList />
      </TodosContextProvider>
    );
  }
}

关键总结 #

• React组件的props是单一对象，不要拆分成多个参数。
• 避免使用any类型，用明确的TypeScript接口约束props，这样能充分利用类型校验的优势。
• 传递props时，直接传递需要的属性，或者用展开运算符...传递整个props对象，不要把props包装成一个名为props的子属性。

内容的提问来源于stack exchange，提问作者user11092881