Komponentstrukturen gör det möjligt för oss att återanvända redan existerande komponenter till nya komponenter. Det finns en rad olika sätt att komponera komponenter och nedan är två sätt som utgår från att man använder CSS-klasser för att ändra utseendet. Om man inte ännu har koll på spread syntax i JavaScript och JSX så börjar det bli dags att kolla upp det:
Ett annat vanligt förekommande ord är Higher Order Functions:
A function which takes a function as an argument and/or returns a function.
Exempel på Higher Order Functions är map, filter & reduce. Dessa tar en funktion som argument och returnerar en ny array baserad på den arrayen man loopar igenom.
Relaterat till detta begrepp har vi även Higher Order Components (eller HOCs) som bygger på samma tänk och kan förklaras enklast som: en komponent som returnerar en annan komponent. I det andra exemplet nedan används en HOC. Det är ett viktigt begrepp i React och många bibliotek bygger på denna struktur. Dock blir det snabbt komplicerat och man får välja själv om man vill fördjupa sig mer. Detta är då ett bra intro:
Exempel på struktur:
//Button.js
function Button(props){
return(
<button className={ `button ${ props.className }` } >
{ props.title }
</button>
)
}//PrimaryButton.js
import React from 'react';
import Button from './Button';
function PrimaryButton(props){
return(
<Button {...props} className="primary" />
)
}
//Usage
//<PrimaryButton title="Click me!"/>//Button.js
function Button(props){
const className = props.primary ? 'button primary' : 'button';
return(
<button className={ className } >
{ props.title }
</button>
)
}
//Usage, props without "=" defaults to true
//<Button primary title="Click me"/>För att öva på att skapa komponenter och återanvända komponenter ska vi återskapa Bootstraps egna "komponenter" fast i React-komponenter:
-
Använd valfri struktur (se exempel ovan) för att återskapa minst 3 av dessa knappar och fokusera på att få in flödet, d.v.s. hur
propsskickas ner: -
Fortsätt med att återskapa några av följande knappar, det ska gå att skicka med flera props, t.ex.:
<Button outline primary />eller<OutlinedPrimaryButton />
Gör så att varje knapp har sitt eget state, detta för att se hur vi kan skicka upp state från en komponent. Vi kommer dock behöva skicka argument till våra onClick i slutuppgiften så det måste sitta, för exempel i ren JavaScript, se denna kod. Det första vi måste göra är att göra komponenten stateful. Tänk dig att denna knapp ska ligga i <App /> om vi nu har state lokalt i denna knapp, hur får vi upp det till <App/> och skriver ut värdet i <App />? Det som saknas är det som frågetecken.
import React, {Component} from 'react';
//Add a class
class Button extends Component {
//Add state
state ={
value: 'Value from inside the button'
}
//Add a local onClick function
onClick = (????) => {
// ???????? we want to send up this.state.value
}
//Add render method
render(){
//Reference this.props instead of just props, className is just a local var
const className = this.props.primary ? 'button primary' : 'button';
return(
<button onClick={ ?????? } className={ className } >
{ this.props.title }
</button>
)
}
}Om du inte redan har gjort det återbesök följande övningar och gör dem, se till så att reacts flöde sitter, lösningsförslag finns till båda övningarna. Strukturera om övningarna så att de använder mindre komponenter om du inte redan gjort det, försök förminska användandet av state: