reactjs - 将 React Prop 与自定义 Prop 结合起来

Question

当使用 Typescript 在 React 中定义 props 时，无论界面是什么，默认的 React props 似乎都会被覆盖。有没有一种干净的方法可以合并两者，而不必指定 React 已经知道的每个 prop？

例子:

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
}

Answer 1

你所说的“React 默认 Prop ”又名“React 已经知道的每个 Prop ”更恰本地称为“任何 React DOM 元素包装器组件接受的 Prop ”，即 onClick , className等

Default props 通常是指静态 defaultProps React.Component 上的属性(property)，您可以使用它为任何未传递给您的组件的 Prop 提供默认值。

onClick , className等不是保留的 prop 名称，您可以在自己的组件中随意使用它们，例如，您可以让组件期望 className成为一个函数(不管这是否是个好主意)。唯一适用于任何类型的 React 元素(在撰写本文时)的保留属性名称是 key和 ref ，它们并不是真正的 props，因为它们不可用于组件的渲染方法。

通过 onClick您自己的组件不会自动注册点击处理程序。它只会在你通过 onClick 时这样做你收到了<div> , <button> ，或您在某处渲染的其他 React DOM 元素包装器。 如果您不对传递给您的 prop 做任何事情，它就没有任何效果(除了可能导致纯渲染组件更新，否则它不会更新)。

例如，以下组件不会响应点击:

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

但以下将:

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

你可以通过 onClick如果你真的想要，只有一个子元素:

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>
)

还要记住，一些 DOM 元素包装器接受其他人不接受的 Prop ，例如 readOnly仅适用于 <input>和 <textarea> .

您甚至可以要求 children成为你想要的任何类型。 例如，你可以传递一个函数作为 children一个组件并使用它(再次强调，这不是 React 的最佳使用，只是为了说明什么是可能的):

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>

所以你看，IProps不一定要扩展任何内容。

但是，通常将 rest props 传递给 React DOM 元素包装器(例如 <div {...props}>...</div> 并且正如您所问的那样，能够检查所有这些输入属性的类型到您的组件会很好.

我认为您可以使用 Flow 执行以下操作以正确检查类型，但不幸的是，我认为没有任何 Typescript 等效项(如果我错了请纠正我):

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