如何将道具从容器组件传递到 redux 表单（组件） - 使用打字稿做出反应答案

【问题标题】：How to pass props from container component to redux form(component) - react using typescript如何将道具从容器组件传递到 redux 表单（组件） - 使用打字稿做出反应
【发布时间】：2018-07-04 08:15:18
【问题描述】：

我有一个表单容器组件：

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] 类型“IntrinsicAttributes & IntrinsicClassAttributes>>> & ...”上不存在属性“id”。

如何解决这个错误？谢谢:)

【问题讨论】：

我认为这是因为 PersonalProps 没有在界面中定义和 Id。你为什么不把类型放在任何地方。类 PersonalDetail 扩展 React.Component
或者在个人道具界面中添加“id”字段。
添加了 id:string，但不起作用。遇到同样的问题

标签： reactjs typescript redux-form react-props

【解决方案1】：

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

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

添加这个，它会删除错误

【讨论】：

添加 id:any 后遇到同样的问题
您还没有在 PersonalDetail 的任何地方初始化状态。虽然不是这个它与这个错误有关。
也试试 class PersonalDetail extends React.Component {
React.Component 这工作正常。为避免错误，我可以这样做，但这不是正确的解决方案。
向您的界面添加 id 应该可以纠正错误。我不知道为什么不是