Лучший способ объединить определенные реквизиты в компоненте React

Question

У меня есть один компонент, который получает реквизиты пользовательских данных, таких как first_name и last_name. Возможно, что либо один из first_name и last_name будет undefined, либо оба undefined.

. Я хочу получить его внутри родительского компонента и отобразить его, комбинируя так:

contactName = {props.client_firstname || props.client_lastname ?
           props.client_firstname +" " +props.client_lastname : "N/A" }

Какой лучший способ проверить, установлено ли значение для first_name и last_name внутри вышеуказанного троичного условия и объединить только определенные значения?

Answer 1

Попробуйте это.

contactName = {
                ([props.client_firstname, props.client_lastname])
                .join(" ")
                .trim()
              }

Пример:

console.log(["FirstName", undefined].join(" ").trim());

console.log([null, "LastName"].join(" ").trim());

console.log(["FirstName", "LastName"].join(" ").trim());

console.log([null, undefined].join(" ").trim());

Answer 2

Вы можете установить типы пропов по умолчанию

YoursComponent.defaultProps = {
  client_firstname: '',
  client_lastname: ''
};

contactName={props.client_firstname +" " +props.client_lastname }

Нет необходимости в троичном операторе. В случае, если он не определен, он получит значение по умолчанию из реквизита по умолчанию.

Спасибо

Answer 3

function getFullName( props = {} ){
  const{ client_firstname='', client_lastname='' } = props;

  let SEPERATOR = client_firstname && client_lastname ? " ": "";
  
  return `${client_firstname}${SEPERATOR}${client_lastname}`
}

console.log( getFullName(
 { client_firstname:'stack', client_lastname:'overflow' }
))

console.log( getFullName(
 { client_firstname:'', client_lastname:'overflow' }
))

console.log( getFullName(
 { client_lastname:'overflow' }
))

console.log(getFullName(
 { client_firstname:'stack', client_lastname:undefined}
))

console.log(getFullName(
  {}
))
console.log(getFullName())

Answer 4

Вы можете использовать массив для хранения двух реквизитов,

, затем join () , trim () , наконец добавьте условный оператор для N/A

const generator = list => {
  const result = list.join(" ").trim();
  return result ? result : "N/A";
};

console.log('>' + generator(["first", "second"]) + '<');
console.log('>' + generator(["first", undefined]) + '<');
console.log('>' + generator([undefined, "second"]) + '<');
console.log('>' + generator([undefined, undefined]) + '<');