reactjs - Hur man åtgärdar typen Type '(string | Element)[] är inte tilldelningsbar till typen 'string | Element | undefined' med hjälp av react och typescript?

jag vill lägga till lite marginal före etiketten och jag försökte göra det och fick fel Typ '(string | Element) [] kan inte tilldelas typ 'string | Element | undefined'

nedan är min kod,

type CheckboxProps = {
    label?: string;
}

const CheckboxComponent: React.FC<CheckboxProps> = ({
    label,
}) => {
    return (
        <>
            <input type="checkbox" />
            <Label>{label}</Label> 
        </>
    );
}


const ParentComponent = (data) => {
    const name = data.name;
    const type = data.type;
    const label = `${name} ${type}`;
    
    return (
        <Checkbox
            label = {label}
        />
        //some other logic
    );
}

Nu är problemet att jag vill lägga till lite marginal mellan kryssrutan och etiketten. Som du ser från koden ovan renderas etiketten inom kryssrute-komponenten och jag vill inte ändra marginalen för etiketten inom kryssrute-komponenten eftersom det är en återanvändbar komponent.

så jag försökte lösningen nedan och försökte lägga till marginal för etiketten i ParentComponent och ändrade typen på label i CheckboxProps-typen för att acceptera sträng eller Element.

type CheckboxProps = {
    label?: string | Element;
}

const ParentComponent = (data) => {
    const name = data.name;
    const type = data.type;
    const label = [<span style={{marginLeft: '4px'}}>${name}</span>, `${type}`];
    
    return (
        <Checkbox
            label = {label}
        />
        //some other logic
    );
}

Men koden ovan ger felet Typ '(string | Element)[]' kan inte tilldelas typen 'string | Element | undefined'

OBS: kryssrute-komponenten är en återanvändbar komponent och den accepterar etikett som sträng från andra komponenter. Endast ParentComponent skickar etikett som i koden ovan.

kan någon hjälpa mig med detta. hur man fixar typfel eller någon bättre lösning för att lägga till marginal. jag är ny på programmering. tack.

Svar #1

Konvertera label-typen i CheckboxProps till HTMLElement. Så prova detta för kryssrutan:

type CheckboxProps = {
    label?: HTMLElement;
}

const CheckboxComponent: React.FC<CheckboxProps> = ({
    label,
}) => {
    return (
        <>
            <input type="checkbox" />
            {label && (<Label>{label}</Label>)}
        </>
    );
}

Och detta för föräldrakomponenten:

const ParentComponent = (data) => {
    const name = data.name;
    const type = data.type;
    const label = <span style={{marginLeft: '4px'}}>${name} ${type}</span>;
    
    return (
        <Checkbox
            label = {label}
        />
        //some other logic
    );
}

Relaterade artiklar