Передача определенного аргумента в функцию с несколькими аргументами в React

Question

В React я создал указанную ниже функцию:

infoPrint (firstname = '--', middlename = '--', surname = '--')
{
    console.log('Firstname: ', firstname, ', Middle name: ', middlename, ', Surname: ', surname);
}

Я вызываю эту функцию в componentWillMount:

componentWillMount() {
    var firstname = 'Naisarg';
    var surname = 'Parmar';
    this.infoPrint(firstname,surname);
}

Я получаю этот вывод:

Firstname: Naisarg, Middle name: Parmar, Surname: --

Но я ожидаю этого:

Firstname: Naisarg, Middle name: --, Surname: Parmar

Answer 1

Чтобы достичь того, что вам нужно, вам нужно будет либо передать -- или null для аргумента middlename:

componentWillMount() {
    var firstname = 'Naisarg';
    var surname = 'Parmar';
    this.infoPrint(firstname, null, surname);
    this.infoPrint(firstname, '--', surname);
}

или, альтернативно, вы можете реорганизовать сигнатуру вашего метода, передав эти аргументы косвенно через аргумент объекта:

function infoPrint(name = { first: '--', middle: '--', last: '--' }) {
  console.log('Firstname: ', name.first, ', Middle name: ', name.middle, ', Surname: ', name.last);
}

infoPrint({
  first: 'Naisarg',
  last: 'Parmar'
});

Метод «аргумент объекта», показанный выше, решает проблему, с которой вы сталкиваетесь, путем сохранения (ключевой) связи между самими аргументами и способом, которым каждый ключевой аргумент фактически используется в вашей функции infoPrint().

Без этого среда выполнения JavaScript не может знать, что вы намерены передать переменную surname в infoPrint() в качестве «третьего аргумента фамилии» - проще говоря, передаваемые вами аргументы назначены с первого до последнего. Замена переменной значениями, как показано ниже, может дать более полное представление о том, что происходит, и почему ваш исходный код не работает должным образом:

// var firstname = 'Naisarg';
// var surname = 'Parmar';

// Substitute variables with values to better understand how
// arguments are being passed to the function
this.infoPrint(
    'Naisarg' /* <-- firstname */,
    'Parmar' /* <-- middlename */,
    /* no value for surname, so use default "--" */
); /* Prints: "Firstname:  Naisarg , Middle name:  Parmar , Surname: -- " */

Answer 2

Вы можете достичь этого, передав буквальный объект в качестве аргумента вашей функции:

class User extends Component {
    componentWillMount() {
        var firstname = 'Naisarg';
        var surname = 'Parmar';
        this.infoPrint({ firstname, surname });
    }

    infoPrint({ firstname = '--', middlename = '--', surname = '--' }) {
        console.log('Firstname: ', firstname, ', Middle name: ', middlename, ', Surname: ', surname);
    }
}

Это очень распространенный шаблон, который очень помогает с необязательными параметрами .

-

Если вы предпочитаете не использовать объект, вы должны передать все аргументы в правильном порядке:

class User extends Component {
    componentWillMount() {
        var firstname = 'Naisarg';
        var surname = 'Parmar';
        this.infoPrint(firstname, null, surname);
    }

    infoPrint(firstname = '--', middlename = '--', surname = '--') {
        console.log('Firstname: ', firstname, ', Middle name: ', middlename, ', Surname: ', surname);
    }
}