javascript - 在 React 组件中组合定义的 props 的最佳方法

Question

我有一个组件，它接收用户详细信息的属性，例如first_name和last_name。 first_name 和 last_name 之一可能是 未定义，也可能都是未定义。

我想在父组件中接收它并通过如下组合显示它:

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

检查上述三元条件中的 first_name 和 last_name 是否设置了值并仅组合定义的值的最佳方法是什么？

Answer 1

您可以设置默认的 Prop 类型

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

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

不需要三元运算符。如果它是未定义的，那么它将从默认属性中获取默认值。

谢谢