Question

这是同一个问题，还是我错过了什么？

import * as React from 'react';

interface Props {
    value: string;
}

const MyComponent = (props: Props) => {
    const { value, ...rest } = props;

    return (
        <input {...rest} type="text" value={value} />
    );
}

interface ParentState {
    searchText: string;
}

class ParentComponent extends React.Component<{}, ParentState> {
    state: ParentState = {
        searchText: ''
    };

    onSearchTextChanged = (e: React.FormEvent<HTMLInputElement>) => {
        this.setState({
            searchText: e.currentTarget.value
        });
    }

    render() {
        const { searchText } = this.state;

        return (
            <div>
                <h2>Some Text</h2>
                <MyComponent value={searchText} onChange={this.onSearchTextChanged} className="search-input" placeholder="Enter text"/> 
// Errors here
            </div>
        )
    }
}

export default ParentComponent

当我在界面中定义了MyComponent的道具时，我收到以下错误：

错误TS2339：属性＆＃39; onChange＆＃39;类型＆＃39; IntrinsicAttributes＆amp;道具＆＃39;

但是，如果我将道具类型更改为任何道具类型，则编译得很好。

const MyComponent = (props: any) => {

是否可以在界面中定义道具，以便有必要的特定道具，但也允许传入额外的道具，所以我不必明确地将它们添加到界面中？

我使用的是TypeScript 2.3.4和React 15.5.4。

Answer 1

您可以通过向界面添加字符串索引签名来避免多余的属性/属性检查：

interface Props {
    value: string;

    // This is a string index signature.
    // This means that all properties in 'Props' are assignable to
    // the empty object type ({})
    [propName: string]: {};
}

你也可以写[propName: string]: any，但这通常会使MyComponent本身的安全性降低。

Answer 2

如果要将input内MyComponent元素的所有属性转发到MyComponent的道具，则可以查找什么道具input（例如，在VSCode中，使用在input标签上进行定义）。

interface IntrinsicElements {
   ....
   input: React.DetailedHTMLProps<React.InputHTMLAttributes<>, HTMLInputElement>;
   ....
}

我们可以使用React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>作为道具的基本类型，我们将获得input的所有属性。由于DetailsHTMLProps只是将ref添加到React.InputHTMLAttributes<HTMLInputElement>中，因此我们可以仅使用React.InputHTMLAttributes<HTMLInputElement>作为基本接口来获取除input之外的所有ref属性：

import * as React from 'react'

interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
    value: string;
}

const MyComponent = (props: Props) => {
    const { value, ...rest } = props;

    return (
        <input {...rest} type="text" value={value} />
    );
}

// Usage
interface ParentState  { searchText :string }
class ParentComponent extends React.Component<{}, ParentState> {
  state: ParentState = {
      searchText: ''
  };

  onSearchTextChanged = (e: React.FormEvent<HTMLInputElement>) => {
      this.setState({
          searchText: e.currentTarget.value
      });
  }

  render() {
      const { searchText } = this.state;

      return (
          <div>
              <h2>Some Text</h2>
              <MyComponent value={searchText} onChange={this.onSearchTextChanged} className="search-input" placeholder="Enter text"/> 
          </div>
      )
  }
}

export default ParentComponent

如何传递其余的道具来反应组件，同时还需要在界面中定义所需的道具

2 个答案: