React
JSX

Anmärkningar

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(<HelloMessage name="Kalo" />, mountNode);

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Kalo" }), mountNode);

const element = <h1>Hello, world!</h1>;

Rekvisita i JSX

Det finns flera olika sätt att specificera rekvisita i JSX.

JavaScript-uttryck

Du kan skicka alla JavaScript-uttryck som rekvisita genom att omge det med {} . Till exempel i denna JSX:

<MyComponent count={1 + 2 + 3 + 4} />

Inuti MyComponent kommer värdet på props.count att vara 10 , eftersom uttrycket 1 + 2 + 3 + 4 utvärderas.

Om uttalanden och för slingor inte är uttryck i JavaScript så kan de inte användas i JSX direkt.

String Literals

Naturligtvis kan du bara passera alla string literal som prop också. Dessa två JSX-uttryck är likvärdiga:

<MyComponent message="hello world" />

<MyComponent message={'hello world'} />

När du passerar en sträng bokstavlig, är dess värde HTML-undantagna. Så dessa två JSX-uttryck är likvärdiga:

<MyComponent message="&lt;3" />

<MyComponent message={'<3'} />

Detta beteende är vanligtvis inte relevant. Det nämns bara här för fullständighet.

Props standardvärde

Om du skickar inget värde för en propeller, det standard true . Dessa två JSX-uttryck är likvärdiga:

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

React-teamet säger emellertid att det inte rekommenderas att deras dokument använder det här tillvägagångssättet , eftersom det kan förväxlas med ES6-objektet förkortning {foo} som är kort för {foo: foo} snarare än {foo: true} . De säger att detta beteende bara är där så att det stämmer med beteendet hos HTML.

Sprid attribut

Om du redan har rekvisita som ett objekt, och du vill skicka det i JSX, kan du använda ... som en spridningsoperatör för att skicka hela props-objektet. Dessa två komponenter är likvärdiga:

function Case1() {
  return <Greeting firstName="Kaloyab" lastName="Kosev" />;
}

function Case2() {
  const person = {firstName: 'Kaloyan', lastName: 'Kosev'};
  return <Greeting {...person} />;
}

Barn i JSX

I JSX-uttryck som innehåller både en öppningstagg och en avslutande tagg, skickas innehållet mellan dessa taggar som en specialrekvisit: props.children . Det finns flera olika sätt att passera barn:

String Literals

Du kan sätta en sträng mellan öppnings- och stängningstaggarna och props.children kommer bara att vara den strängen. Detta är användbart för många av de inbyggda HTML-elementen. Till exempel:

<MyComponent>
    <h1>Hello world!</h1>
</MyComponent>

Detta är giltigt JSX, och props.children i MyComponent kommer helt enkelt att vara <h1>Hello world!</h1> .

Observera att HTML är obestämd , så att du generellt kan skriva JSX precis som du skulle skriva HTML.

Observera att JSX i detta fall:

• tar bort blanksteg i början och slutet av en rad;
• tar bort tomma rader;
• nya rader intill taggar tas bort;
• nya linjer som förekommer i mitten av strängbokstäver kondenseras till ett enda utrymme.

JSX barn

Du kan tillhandahålla fler JSX-element som barnen. Detta är användbart för att visa kapslade komponenter:

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

Du kan blanda olika typer av barn, så att du kan använda strängbokstäver tillsammans med JSX-barn . Detta är ett annat sätt som JSX är som HTML, så att detta är både giltig JSX och giltig HTML:

<div>
  <h2>Here is a list</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

Observera att en React-komponent inte kan returnera flera React-element, men ett enda JSX-uttryck kan ha flera barn . Så om du vill att en komponent ska återge flera saker kan du linda in dem i en div som i exemplet ovan.

JavaScript-uttryck

Du kan skicka alla JavaScript-uttryck som barn genom att bifoga det inom {} . Till exempel är dessa uttryck ekvivalenta:

<MyComponent>foo</MyComponent>

<MyComponent>{'foo'}</MyComponent>

Detta är ofta användbart för att göra en lista med JSX-uttryck av godtycklig längd. Till exempel ger detta en HTML-lista:

const Item = ({ message }) => (
  <li>{ message }</li>
);

const TodoList = () => {
  const todos = ['finish doc', 'submit review', 'wait stackoverflow review'];
  return (
    <ul>
      { todos.map(message => (<Item key={message} message={message} />)) }
    </ul>
  );
};

Observera att JavaScript-uttryck kan blandas med andra typer av barn.

Funktioner som barn

Normalt kommer JavaScript-uttryck som är infogade i JSX att utvärdera till en sträng, ett React-element eller en lista över dessa saker. Men props.children fungerar precis som alla andra rekvisita genom att det kan skicka alla slags data, inte bara de sorter som React vet hur de ska göra. Om du till exempel har en anpassad komponent kan du låta den props.children tillbaka som props.children :

const ListOfTenThings = () => (
  <Repeat numTimes={10}>
    {(index) => <div key={index}>This is item {index} in the list</div>}
  </Repeat>
);

// Calls the children callback numTimes to produce a repeated component
const Repeat = ({ numTimes, children }) => {
  let items = [];
  for (let i = 0; i < numTimes; i++) {
    items.push(children(i));
  }
  return <div>{items}</div>;
};

Barn som överförs till en anpassad komponent kan vara vad som helst, så länge den komponenten förvandlar dem till något som React kan förstå innan de återges. Denna användning är inte vanligt, men den fungerar om du vill sträcka vad JSX kan.

Ignorerade värden

Observera att false , null , undefined och true är giltiga barn. Men de gör helt enkelt inte. Dessa JSX-uttryck kommer alla att göra samma sak:

<MyComponent />

<MyComponent></MyComponent>

<MyComponent>{false}</MyComponent>

<MyComponent>{null}</MyComponent>

<MyComponent>{true}</MyComponent>

Detta är oerhört användbart för att villkorligt återge React-element. Denna JSX ger bara en om showHeader är sant:

<div>
  {showHeader && <Header />}
  <Content />
</div>

En viktig varning är att vissa "falska" värden, såsom 0 talet, fortfarande återges av React. Till exempel kommer den här koden inte att bete sig som du kan förvänta dig eftersom 0 kommer att skrivas ut när props.messages är en tom matris:

<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

En metod för att fixa detta är att se till att uttrycket före && alltid är booleskt:

<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

Slutligen, tänk på att om du vill ha ett värde som false , true , null eller undefined att visas i utdatorn, måste du först konvertera det till en sträng:

<div>
  My JavaScript variable is {String(myVariable)}.
</div>