reactjs - hvordan kan jeg sende et enkelt argument til en react-funktion, der returnerer en komponent?

Jeg bruger React med TypeScript. Jeg har en funktion, der returnerer en komponent i JSX:

function TestComponent(str: string) {
    return <span>Hello, your string was {str}</span>
}

Forudsat at funktionen er rimelig (er den det?), hvordan kalder jeg den inden for mere jsx-kode?

Jeg har prøvet:

  <TestComponent str="abcde" />
  <TestComponent str={'abcde'} />
  <TestComponent {'abcde'} />
  <TestComponent {str:'abcde'} />

Men jeg mistænker, at jeg mangler noget mere grundlæggende om, hvordan funktionsparametre bliver videregivet (jeg er meget ny både til React og TypeScript).

Tak.

Svar #1

Du er ret tæt på, problemet du står overfor er, at props er et objekt, selv når du sender et enkelt element.

interface TestComponentProps {
   str: string;
}
function TestComponent({str}: TestComponentProps) {
    return <span>Hello, your string was {str}</span>
}

Du kalder det derefter med en af følgende syntakser:

<TestComponent str='abcde' />
<TestComponent str={'abcde'} />

str={'abcde'} betyder bare, at React skal evaluere 'abcde'. Da det er en strengliteral, ændres der ikke noget. Dog er der en vigtig bemærkning: strengliteraler får ikke anvendt nogen HTML-escaping. Så du skal håndtere dette selv.

React-dokumentationen gør et godt stykke arbejde med at forklare, hvad der sker under overfladen her. Men kort sagt er JSX bare syntaktisk sukker, og disse svarer til at skrive:

React.createElement(TestComponent, {str: 'abcde'}, null);

Ud fra dette kan du sandsynligvis gætte, hvad der sker, hvis vi tilføjer en anden rekvisit.

interface TestComponentProps {
   str: string;
   coolString: string;
}
function TestComponent({str, coolString}: TestComponentProps) {
    return <span>Hello, your string was {str} and your coolString was {coolString}</span>
}

<TestComponent str="abcde" coolString={'fghi'}/>

Så, hvad er den tredje parameter? Det er for børn. Indtastning for børn blev stjålet fra dette svar. Lad os se det i aktion.

interface TestComponentProps {
   str: string;
   children: React.ReactNode
}
function TestComponent({str, children}: TestComponentProps) {
    return (<>
               <span>Hello, your string was {str}</span>
               <div>
                  {children}
               </div>
            </>);
}

<TestComponent str={'<3'}>
   <p>Hey there! 1 + 1 = {1 + 1}</p>
   <p>I'm another child!</p>
</TestComponent>

Bliver :

function TestComponent({
  str,
  children
}) {
  return React.createElement(React.Fragment, null, React.createElement("span", null, "Hello, your string was ", str), React.createElement("div", null, children));
}


React.createElement(TestComponent, {
  str: '<3'
}, React.createElement("p", null, "Hey there! 1 + 1 = ", 1 + 1), React.createElement("p", null, "I'm another child!"));

Bemærk: <> </> syntaksen kaldes en Fragment og er i bund og grund en grupperingsfunktion, der ikke har nogen DOM-output.

Svar #2

Prøv at få din funktion til at acceptere et props-objekt som parameter og brug {props.str} i span-elementet. Eller de-strukturer str-proppen i parameteren.

Relaterede artikler