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

【问题标题】：REACT - how to make local variable accessible outside the classREACT - 如何使局部变量在类外部可访问
【发布时间】：2017-02-02 01:49:39
【问题描述】：

我在使我的局部变量可以在类外访问时遇到问题

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 = reduxForm({form: 'LoginForm', 验证})(LoginForm);

【问题讨论】：

标签： reactjs redux redux-form

【解决方案1】：

一般不鼓励出于此类目的使用全局变量。原因在其他答案中非常详细，例如this answer：

在 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);
...

【讨论】：

非常感谢您的建议。我已经这样做了。它的工作。

【解决方案2】：

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

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

【讨论】：