Reactjs 将React道具与自定义道具连接

在React中使用Typescript定义props时，无论接口是什么，默认的React props都会被覆盖。有没有一种干净的方法可以在不必指定React已经知道的每个道具的情况下合并这两个道具

例如：

interface IProps { // extends React.???
   title: string;
   // Generally seen adding children?: any
   // But this can get out of hand with onClick, onChange, etc
}

function MyComponent(props: IProps) {
   return props.children; // Typescript error: children doesn't exist on props
}

---

您应该定义无状态功能组件将返回

React.SFC

试试这个

import * as React from "react";
const MyComponent: React.SFC<IProps> = (props) => {
  return props.children;
}

import*as React from“React”；
常量MyComponent:React.SFC=（道具）=>{
返回道具。儿童；
}

如果您想使用基于类的组件，可以改为使用

React.component

扩展类

比如说

import * as React from "react"
class MyComponent extends React.Component<IProps> {
  public render(): JSX.Element {
    return (
      <div>...</div>
    );
  }
}

import*作为“React”中的React
类MyComponent扩展了React.Component{
public render（）：JSX.Element{
返回(
...
);
}
}

您所指的“React default props”即“每个prop React已经知道的”更恰当地称为“任何React DOM元素包装组件都接受的props”，即

onClick

，

className

等

Default props通常是指

React.Component

上的静态

defaultProps

属性，您可以使用该属性为未传递到组件的任何道具提供默认值

onClick

，

className

等都不是保留的道具名称，您可以在自己的组件中随意使用它们，例如，您可以让组件期望

className

成为一个函数（无论这是否是一个好主意）。在任何类型的React元素上（在编写本文时）使用的唯一保留道具名称是

key

和

ref

，它们不是真正的道具，因为它们不可用于组件的渲染方法

将

onClick

传递给您自己的组件不会自动注册单击处理程序。只有将收到的

onClick

传递给一个

、

或其他在行的某个地方呈现的React DOM元素包装器时，才会执行此操作如果您不使用传递的道具执行任何操作，则不会产生任何效果（除了可能导致纯渲染组件更新，否则它不会更新）

例如，以下组件将不响应单击：

const ClickFail = props => <button />
render(<ClickFail onClick={...} />, document.getElementById('root'))

或者，您可以传入多个具有不同名称的单击处理程序：

const SimpleForm = props => (
  <form>
    <button onClick={props.onCancelClick}>Cancel</button>
    <button onClick={props.onOKClick}>OK</button>
  </form>
)

所以你看，

IProps

不一定要扩展任何东西

但是，将rest道具传递给React DOM元素包装器（例如，

…

）是很常见的，正如您所要求的，能够检查组件的所有这些输入属性的类型将是很好的

我认为您可以使用Flow执行以下操作来正确检查类型，但不幸的是，我认为没有任何类型脚本（如果我错了，有人会纠正我）：

type Props=React.ElementProps&{
标题：字符串，
}
常量MyComponent=（道具：道具）=>(
{props.title}
)

这并没有真正解决作者对如何在React中处理

onClick

、

className

等道具的困惑。只是必须读取React已经知道的每个属性会让人感到乏味。Typescript不知道组件在定义其他/custo时有权访问基本的React道具M道具。它们似乎被改写了。所以Typescript会犯一个错误，比如说，孩子不是道具的属性。谢谢这个广泛的解释。我在寻找这个信息，谢谢你这个详尽的答案。@ Daulu，如果你回来这里，你应该考虑把这个标记为答案。

const ClickButtonOnly = props => (
  <form>
    <input placeholder="ignores clicks" />
    <button onClick={props.onClick}>Handles Clicks</button>
  </form>
)

const SimpleForm = props => (
  <form>
    <button onClick={props.onCancelClick}>Cancel</button>
    <button onClick={props.onOKClick}>OK</button>
  </form>
)

type Props = {
  value: number,
  children: (value: number) => number,
}
const ApplyFunction = (props: Props) => (
  <div>{React.Children.only(props.children)(props.value)}</div>
)

render(
  <ApplyFunction value={3}>
    {value => value * value}
  </ApplyFunction>,
  document.getElementById('root')
)
// renders <div>9</div>

type Props = React.ElementProps<typeof 'div'> & {
  title: string,
}
const MyComponent = (props: Props) => (
  <div {...props}>
    {props.title}
  </div>
)