Есть ли способ указать, к какому реквизиту обращаются в компонентах более высокого порядка, которые имеют тот же реквизи ⇐ CSS

[Anonymous]

Я создаю компонент более высокого порядка в React для загрузки файла и отображения прогресса загрузки пользователю.
У меня есть текстовый компонент для отображения имени файла и компонента индикатора выполнения чтобы показать прогресс. Их реквизит следующий:

Код: Выделить всё

interface TextProps {
value?: string
id?: string;
className?: string;
...
}

type ProgressBarProps = {
value?: number;
label?: string;
isError?: boolean;
...
};

Упрощенное представление их определения приведено ниже:

Код: Выделить всё

function ProgressBar({value, ...rest}: ProgressBarProps) {
return (


value={value}
/>

);
};

function Text({value, ...rest}: TextProps){
return (


);
}

const TextWithProgressBar = ProgressBar(Text);

Теперь, когда я пытаюсь это использовать, я делаю следующее:

Код: Выделить всё

function render(file) {
const ProgressBarPropDef = {
value: 50,
isError: false,
...
}

return (


)
}

Когда я удаляю {ProgressBarPropDef, имя файла в текстовом поле устанавливается правильно. Но {ProgressBarPropDef перезаписывает значение имени файла, когда я включаю эту строку. Я вижу, что одно и то же передается как значение компонентам Text и ProgressBar. Как я могу передать разные значения обоим этим компонентам?
Я осмотрелся и не увидел никого, кто столкнулся бы с подобной проблемой. Я предполагаю, что это потому, что иметь конфликтующие имена реквизитов — плохая практика. Однако это общие компоненты, имена которых я не могу изменить.

Подробнее здесь: https://stackoverflow.com/questions/783 ... nents-that