Question

我有一个Form容器组件：

class PersonalDetailContainer extends React.Component<PropTypes> {
  onSubmit = async (fields: PersonalFields) => {
    this.props.savePersonalDetail(fields);
  };

  render(): JSX.Element {
    return (
      <div className="row">
        <div className="col-sm-12 col-md-12">
          <div>
            <PersonalDetail onSubmit={this.onSubmit} id="id" />
             <!-- onSubmit props working fine but id props not working fine
             **error: [ts] Property 'id' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<{}, Partial<ConfigProps<{}, {}>>>> & ...'.**
            -->
          </div>
        </div>
      </div>
    );
  }
}

const mapDispatchToProps = {
  savePersonalDetail: savePersonalDetail,
};
export default connect(null, mapDispatchToProps)(PersonalDetailContainer);

表单组件中的

：

import * as React from 'react';
import { Field, InjectedFormProps, reduxForm } from 'redux-form';
import { renderInput } from '../../../utils/input-field';

export type PersonalFields = {
  name?: string;

};

interface PersonalProps extends InjectedFormProps {
  id: string;
  onSubmit({ name }: PersonalFields): void;
}

class PersonalDetail extends React.Component<PersonalProps, PersonalFields> {
  state: PersonalFields = {};

  onChangeSetToState = (stateKey: string) => (e: React.FormEvent<HTMLInputElement>) =>
    this.setState({ [stateKey]: e.currentTarget.value.trim() });

  onSubmit = () => {
    this.props.onSubmit(this.state);
  };
  render() {
    return (
      <div className="row">
        <div className="col-sm-12 col-md-12">
          <form onSubmit={this.props.handleSubmit(this.onSubmit)}>
            <Field
              name="name"
              id="name"
              component={renderInput}
              value={this.state.name}
              type="text"
              placeholder="Name"
              onChange={this.onChangeSetToState('name')}
            />
            <div className="loginBtnContainer">
              <button className="btn primaryButton" type="submit">
                Update
              </button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default reduxForm({ form: 'personalForm' })(PersonalDetail);

在容器中，onSubmit正确传递给子组件，但id道具未正确传递。它的投掷错误：

[ts] Property＆＃39; id＆＃39;类型＆＃39; IntrinsicAttributes＆amp; IntrinsicClassAttributes＆GT;＆GT;＆GT; ＆安培; ...＆＃39;

如何解决此错误？谢谢:)）

Answer 1

因为您的界面personalprops没有定义id字段。

 interface PersonalProps extends InjectedFormProps {
    onSubmit({ name }: PersonalFields): void;
    id:any; 
 }

添加此项并删除rror

如何将容器组件中的道具传递给redux表单（组件） - 使用typescript

1 个答案: