React.js #3

Komponenter

Indtil videre har vi ikke opnået meget – app-wise. Selve hjemmesiden skriver noget html ud på måske den mest besværlige måde man kan forestille sig.

Og nu bliver det endnu værre (men fortvivl ikke, der er mening med galskaben).

Vi har indtil nu gang i siderne:

app.js: importerer stort set bare postlist.js, og viser den

postlist.js: itererer gennem posts.json og viser resultatet

Men det skal vise sig at react er meget nøje med at lade os programmere og håndtere data i så små portioner som muligt. Og for at det ikke skal være løgn, er postlist.js ikke en lille nok stump – den skal kun iterere elementerne, formateringen vil vi lave i en såkaldt “komponent”.

Opret en side ved navn PostDetail.js på samme niveau som postlist.js – udskift de steder hvor der står postlist med PostDetail. Denne side skal nu spille den ene og vigtige rolle, at formattere poster. Den færdige side ser således ud:

import React, {Component} from 'react';

class PostDetail extends Component {
render() {
const {post} = this.props
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
)
}
}

export default PostDetail ;

Nu importerer vi PostDetail klassen i PostList, og kan derfor skrive en lille smule mindre kode i den fil:

import React, {Component} from 'react';
import PostDetail from './PostDetail';
import PostData from "../data/posts.json";

class Postlist extends Component {
render() {
return (
<div>
<h1> Hello there from postlist</h1>
{PostData.map((item, index)=>{
return (
<PostDetail post={item} key={index} />
)
})}
</div>
);
}
}

export default Postlist;

Læg mærke til at den første fil PostDetail opretter en konstant: {post}. Mens PostList sender objektet “post” med, når den kalder PostDetail.

Leave a comment

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *