REACT - 如何使局部变量在 class 之外可访问

Question

我在使我的局部变量在 class

之外可以访问时遇到了问题

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', validation})(LoginForm);

Answer 1

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

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

Answer 2

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

The primary reason why global variables are discouraged in javascript is because, in javascript all code share a single global namespace, also javascript has implied global variables ie. variables which are not explicitly declared in local scope are automatically added to global namespace. Relying too much on global variables can result in collisions between various scripts on the same page.

与其将验证（函数？）作为 prop 传递下去，不如考虑将其重构为辅助文件，然后将其导入您的表单。

示例：

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

REACT - 如何使局部变量在 class 之外可访问

REACT - how to make local variable accessible outside the class

reactjs

redux

redux-form