Reactjs REACT-如何使局部变量在类外可访问

我在使我的局部变量在课堂之外可以访问时遇到了一个问题

class LoginForm extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {

    const {
      handleSubmit,
      pristine,
      reset,
      submitting,
      submitData,
      renderTextField,
      validation
    } = 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 = reduxForm({form: 'LoginForm', validation})(LoginForm);

export default LoginForm

类LoginForm扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
常数{
手推，
崭新的
重置，
提交，
提交数据，
RenderExtfield，
验证
}=这是道具；
返回(
登录
)
}
};
LoginForm=reduxForm（{form:'LoginForm'，validation}）（LoginForm）；
导出默认登录表单

我想在中提供验证

LoginForm=reduxForm（{form:'LoginForm'，validation}）（LoginForm）

---

要生成全局类变量（不建议），请执行以下操作：

let my_global = 0;

class LoginForm extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {

    const {
      handleSubmit,
      pristine,
      reset,
      submitting,
      submitData,
      renderTextField,
      validation
    } = this.props;
    console.log(my_global); #we can access the global variable anywhere in here
    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 = reduxForm({form: 'LoginForm', validation})(LoginForm);

export default LoginForm

让my_global=0；
类LoginForm扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
常数{
手推，
崭新的
重置，
提交，
提交数据，
RenderExtfield，
验证
}=这是道具；
log（my_global）#我们可以在这里的任何地方访问全局变量
返回(
登录
)
}
};
LoginForm=reduxForm（{form:'LoginForm'，validation}）（LoginForm）；
导出默认登录表单

通常不鼓励使用全局变量进行此类操作。原因在其他答案中非常详细，例如：

javascript中不鼓励使用全局变量的主要原因是，在javascript中，所有代码共享一个全局名称空间，并且javascript具有隐含的全局变量，即未在局部范围中显式声明的变量会自动添加到全局名称空间。过于依赖全局变量可能会导致同一页面上的不同脚本之间发生冲突

<> >而不是将验证（函数）作为一个道具传递，也许考虑将它重构为帮助文件，然后将其导入到表单中。

例如：

//helpers.js

const validation = (someParams) => {
  return (
    // do validation here as required
  );
}

export default validation;

及

---

谢谢你的建议。我已经这么做了。这就是工作。

// LoginForm.js

import { validation } from './path/to/helpers';

...

LoginForm = reduxForm({form: 'LoginForm', validation})(LoginForm);
...