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

【问题标题】：can't passing function to React child component无法将函数传递给 React 子组件
【发布时间】：2017-06-18 08:41:20
【问题描述】：

当我尝试将函数传递给其中的子组件时遇到问题，它总是显示一条消息通知“renderTextField 未定义”

这是我的代码。

表单容器

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

我也以父/容器形式执行 console.log(renderTextField)，它显示：

函数 renderTextField(props) { 返回 _react3.default.createElement(_reduxFormMaterialUi.TextField, _extends({ hintText: props.label, 浮动标签文本：props.label， errorText: props.touc…

【问题讨论】：

标签： reactjs redux redux-form

【解决方案1】：

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

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

【讨论】：

我的错误。抱歉，我没有对此给予足够的关注。谢谢你，先生。