javascript - Confusion lors du passage des paramètres dans React

Question

En regardant les exemples donnés par draft-js, j'ai été confus.

Je transfère généralement les paramètres directement

xxx={(ev, arg1, arg2,……) => {this.xxx(ev, arg1, arg2,……)}

Exemple de démarrage rapide officiel

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
        <Editor editorState={this.state.editorState} onChange={this.onChange} />
    );
  }
}

Vous voulez savoir comment le paramètre editorState est transmis à la fonction onChange ?
J'ai essayé

this.onChange = (editorState) => {
    var length = arguments.length;
    console.log('change');
    for (var i = 0; i < length; i++) {
        if (arguments[i] == editorState) {
            console.log(i);
        }
    }
    this.setState({editorState})
};

Il n'y a pas de paramètre editorState dans les arguments. Et s'il y a une sortie directe

this.onChange = (editorState) => {
    console.log(editorState);
    this.setState({editorState})
};

Pourquoi ?

Answer 1

La fonction flèche ne crée pas de nouvelle portée de fonction, donc un nouveau this ne sera pas construit et les arguments ne peuvent pas être utilisés.

Donc, le test arguments rédigé par le questionneur ne contient pas réellement les "arguments" que vous souhaitez

Référence chinois :
http://es6.ruanyifeng.com/#do...
Il y a plusieurs points à noter lors de l'utilisation des fonctions fléchées.

(1) L'objet this dans le corps de la fonction est l'objet où il est défini, pas l'objet où il est utilisé.
(2) ne peut pas être utilisé comme constructeur, c'est-à-dire que la nouvelle commande ne peut pas être utilisée, sinon une erreur sera générée.
(3) L'objet arguments ne peut pas être utilisé, car l'objet n'existe pas dans le corps de la fonction. Si vous souhaitez l'utiliser, vous pouvez utiliser les paramètres Rest à la place.
(4) La commande rendement ne peut pas être utilisée, donc la fonction flèche ne peut pas être utilisée comme fonction générateur.

démo en ligne : http://jsbin.com/yuforakeso/e...
demo :

function foo () {
  const bar = function bar (arg1) {
    console.log(`arguments:`);
    console.log(arguments);
    console.log(`bar arg1:${arg1}`)
  }
  
  bar('barArg');
  
  const fooArguments = arguments;
  
  const baz = (arg2) => {
    console.log()
    console.log(`arguments:`);
    console.log(arguments);
    if(fooArguments === arguments) {
      console.log('Arrow Functions not have arguments');
    }
    console.log(`baz arg2:${arg2}`)
  }
  
  baz('bazArg');
}

foo()

Answer 2

_update(editorState: EditorState): void {
    this._latestEditorState = editorState;
    this.props.onChange(editorState);
}

Il s'agit d'un code source du composant Editor C'est ce composant qui renvoie les paramètres souhaités.

Answer 3

Votre façon habituelle d'écrire est de l'écrire dans la balise, c'est-à-dire d'utiliser la syntaxe js pour l'expliquer dans {}
L'exemple rapide est la manière normale d'écrire
=>Les arguments de la fonction construite par des symboles sont différents à partir des arguments de la fonction construite par function. Idem, vous pouvez directement sortir les arguments pour voir ce qu'ils sont

.

Answer 4

Je l'ai résumé moi-même.

Modifier la fonction de theone1006

function foo () {
  const bar = function bar (arg1) {
    console.log(`arguments:`);
    console.log(arguments);
    console.log(`bar arg1:${arg1}`)
  }
  
  bar('barArg');
  
  const fooArguments = arguments;
  
  const baz = (arg2) => {
    console.log()
    console.log(`arguments:`);
    console.log(arguments);
    if(fooArguments === arguments) {
      console.log('Arrow Functions not have arguments');
    }
    console.log(`baz arg2:${arg2}`)
  }
  
  baz('bazArg');
}

foo('test');

Vous pouvez constater que les arguments de baz sont les arguments de foo.
Si la fonction baz est proposée séparément

  const baz = (arg2) => {
    console.log()
    console.log(`arguments:`);
    console.log(arguments);
    console.log(`baz arg2:${arg2}`)
  }
  
  baz('bazArg');

affichera arguments is not defined.

Puis j'ai essayé

    constructor(props) {
        super(props);
        console.log(arguments);
        this.handleClick = (a, b, c) => {
            console.log(a);
            console.log(b);
            console.log(c);
            console.log('..............');
            console.log(arguments);
        }        
    }
    render() {
        return (
            <p>
                <p onClick={(event) => this.handleClick(event)}>111</p>
            </p>
        );
    }

On voit que les arguments de handleClick sont les arguments du constructeur. Les paramètres a, b, c et les arguments sont incohérents.

Enfin, d'après la réponse de chhu1, je sais d'où viennent les paramètres.