无法将函数传递给 React 子组件

can't passing function to React child component

当我尝试将一个函数传递给内部的子组件时遇到问题,它总是显示一条消息通知 "renderTextField is not defined"

这是我的代码。

表单容器

const renderTextField = props => (
  <TextField hintText={props.label}
    floatingLabelText={props.label}
    errorText={props.touched && props.error}
    {...props}
  />
)

class LoginPage extends React.Component {

  constructor(props) {
    super(props);
    this.processForm = this.processForm.bind(this);
  }

  processForm(data) {
    console.log(data);
  }

  /* Render the component. */
  render() {  
    console.log(renderTextField);
    return (
      <LoginForm
        submitData={this.processForm}
        renderTextfield={renderTextField}
      />
    );
  }

}

表单子组件

   class LoginForm extends React.Component{

       constructor(props) {
        super(props);
       }

      render(){
        const { handleSubmit, pristine, reset, submitting, submitData, renderTextField } = this.props;

          return(
            <Card className="container">
              <form onSubmit={handleSubmit(submitData)}>
                <h2 className="card-heading">Login</h2>

                <div className="field-line">
                  <Field name="email" component={renderTextField} label="Email"/>
                </div>
        </form>
        </Card>
      )
  }
};

在LoginForm页面中产生这样的错误:

Uncaught ReferenceError: renderTextField is not defined

我也以 parent/container 形式执行 console.log(renderTextField),它显示:

function renderTextField(props) { return _react3.default.createElement(_reduxFormMaterialUi.TextField, _extends({ hintText: props.label, floatingLabelText: props.label, errorText: props.touc…

您没有正确地将函数传递给 LoginForm

renderTextfield={renderTextField} 应该是 renderTextField={renderTextField}