Блог

У меня есть вопрос о необязательном свойстве, используемом в функциональном компоненте в React.
Существует компонент, возвращающий ComponentB, который возвращает ComponentC. Изначально в ComponentAProperties и ComponentBProperties было только одно свойство (property1). Цель состоит в том, чтобы добавить другое свойство (property2), которое является необязательным для ComponentAProperties и ComponentBProperties, чтобы, если оно предоставлено, ComponentC мог его использовать. Приведенный в комментарии код — это то, что я предлагаю для добавления свойства2. Я хотел бы знать, является ли это лучшим подходом?

 interface ComponentAProperties {
    property1: string;
    //property2?: string;
}

export function ComponentA ({ property1 /*, property2 = ''*/ }: ComponentAProperties) {
    return 
        <ComponentB
            property1 = {property1}
            //property2 = {property2}
        />
}       


interface ComponentBProperties {
    property1: string;
    property2?: string;
}


export function ComponentB ({ property1 /*, property2 = ''*/ }: ComponentBProperties) {
    return
        <ComponentC
            property1 = {property1}
            // combineItems is a function that can accept any number of strings and
            // ignore empty string('') if provided.
            property2 = {combineItems(default, property2)}
        />
}