Javascript 在React组件中组合已定义支柱的最佳方法

我有一个组件，它接收用户详细信息的道具，如

first\u name

和

last\u name

。可能是

first_name

和

last_name

中的一个

未定义

，或者两者都

未定义

我希望在父组件中接收它，并通过如下方式组合显示它：

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

---

检查是否在上述三元条件内为

first\u name

和

last\u name

设置了值并仅组合定义的值的最佳方法是什么

您可以设置默认道具类型

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

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

不需要三元运算符。如果未定义，则将从默认道具获取默认值

---

谢谢

您可以设置默认道具类型

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

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

不需要三元运算符。如果未定义，则将从默认道具获取默认值

---

谢谢

您可以使用阵列存储这两个道具

然后，最后添加for

N/A

const生成器=列表=>{
const result=list.join（“”.trim（）；
返回结果？结果：“不适用”；
};
console.log（'>'+generator（[“第一”，“第二”]）+''+generator（[“第一”，未定义]）+''+generator（[未定义，第二”]）+''+generator（[未定义，未定义]）+”您可以使用数组来存储这两个道具

然后，最后添加for
N/A


const生成器=列表=>{
const result=list.join（“”.trim（）；
返回结果？结果：“不适用”；
};
console.log（“>”+生成器（[“第一”、“第二”]）+“”+生成器（[“第一”，未定义]）+“”+生成器（[未定义，第二”]）+“”+生成器（[未定义，未定义]）+”试试这个

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

例如：


console.log（[“FirstName”，未定义].join（“”.trim（））；
log（[null，“LastName”].join（“”.trim（））；
log（[“FirstName”，“LastName”].join（“”.trim（））；
console.log（[null，未定义].join（“”.trim（））；
试试这个

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

例如：


console.log（[“FirstName”，未定义].join（“”.trim（））；
log（[null，“LastName”].join（“”.trim（））；
log（[“FirstName”，“LastName”].join（“”.trim（））；
console.log（[null，未定义].join（“”.trim（））；
函数getFullName（props={}）{
const{client_lastname=''，client_lastname=''}=props；
让separator=client_firstname&&client_lastname？”：“”；
返回`${client\u lastname}${separator}${client\u lastname}`
}
console.log（getFullName(
{客户端名称：'stack'，客户端名称：'overflow'}
))
console.log（getFullName(
{client_lastname:''，client_lastname:'overflow'}
))
console.log（getFullName(
{client_lastname:'overflow'}
))
console.log（getFullName(
{client_lastname:'stack'，client_lastname:未定义}
))
console.log（getFullName(
{}
))
console.log（getFullName（））
函数getFullName（props={}）{
const{client_lastname=''，client_lastname=''}=props；
让separator=client_firstname&&client_lastname？”：“”；
返回`${client\u lastname}${separator}${client\u lastname}`
}
console.log（getFullName(
{客户端名称：'stack'，客户端名称：'overflow'}
))
console.log（getFullName(
{client_lastname:''，client_lastname:'overflow'}
))
console.log（getFullName(
{client_lastname:'overflow'}
))
console.log（getFullName(
{client_lastname:'stack'，client_lastname:未定义}
))
console.log（getFullName(
{}
))
console.log（getFullName（））

如果first未定义，具体结果将是“x”（以空白开头）。我理解你的问题。我只是从react的角度给出一个方向。如果他认为这是正确的方法，那么他可以增强这一逻辑。：）@QubaishBhatti有任何帖子解决了您的问题吗？如果您还有其他问题，请通知我们。如果第一个没有定义，具体结果将是“x”（以空白开头）。我理解您的问题。我只是从反应的角度给出一个方向。如果他认为这是正确的方法，那么他可以加强这一逻辑。：）@Qubaishbatti有任何帖子解决了你的问题吗？如果您还有其他问题，请通知我们。