reactjs - 能够在 React JS / Redux 中导出功能组件

Question

我在 react js 中使用 redux 表单。由于可重用的目的，我将一个功能组件放在一个单独的文件中，如下所示。

渲染字段.js

import React from "react";

function renderFields({
  input,
  label,
  type,
  meta: { touched, error, warning }
}) {
  return (
    <div>
      <div className="control">
        <label className="field">{label}</label>
        ..........................
        </div>
      </div>
    </div>
  );
}

export default renderFields;

我只想在终端类组件中使用它。

终端.js

 import React, { Component } from "react";

    import renderFields from "../../renderComponents/RenderFields";

    class Terminal extends Component {
      constructor(props) {
        super(props);

        this.state = {
          name: "",
          uid: "",
          status: null
        };
      }

    ......................

      render() {
        return (
          <div className="Terminal">
            <div className="card">

              <div id="Terminalform">
                <form
                  class="container-fluid terminalform "
                  onChange={this.handleSubmit}
                >
                  <div class="content">
                    {/*Terminal Name */}
                    <FormGroup controlId="name" bsSize="large">
                      <ControlLabel>TERMINAL NAME</ControlLabel>
                      <Field
                        style={{ width: "100%" }}
                        component={renderFields}
                        name="name"
                        type="text"
                        onChange={this.handleChange}
                      />
                    </FormGroup>





                  </div>
                </form>
              </div>
            </div>
          </div>
        );
      }
    }

    Terminal = reduxForm({
      form: "terminalform"
    })(Terminal);

当我运行这些文件时，我收到如下错误。

有人可以帮我解决这个错误吗？

更新

我将 RenderField 函数包装到一个组件中，如下所示

import React, { Component } from "react";

class RenderFields extends Component {
  render() {
    const { label, input, type, touched, error, warning } = this.props;
    return (
      <div>
        <div className="control">
          <label className="field">{label}</label>
          <input
            className="input"
            style={{ width: "100%" }}
            {...input}
            placeholder={label}
            type={type}
          />

          <br />
          <div style={{ color: "red" }}>
            {touched &&
              ((error && <span>{error}</span>) ||
                (warning && <span>{warning}</span>))}
          </div>
        </div>
      </div>
    );
  }
}

export default RenderFields;

但我仍然想出了同样的错误。

标签： reactjsreduxredux-form