Naudosime gavatar.com avataru atrinktu pagal emailą:
pertvarkome React komentaro renderinimo išvaizdą:
/resources/assets/js/components/App.js
Visus turimus posts state įrašus "mapinam" po vieną this.state.posts.map(post => ( )) .
...
<div className="col-md-6">
<div className="card">
<div className="card-header">Recent tweets</div>
<div className="card-body">
{this.state.posts.map(post => (
<div key={post.id} className="media">
<div className="media-left">
<img src={post.user.avatar} className="media-object mr-2"/>
</div>
<div className="media-body">
<div className="user">
<a href="#">
<b>{post.user.name} </b>
</a>
</div>
<p>{post.body}</p>
</div>
</div>))}
</div>
</div>
</div>
...
toliau mums reikia pakoreguoti modelį User.php .
/app/User.php
<?php
namespace App;
...
protected $appends = ['avatar'];
public function posts(){
return $this->hasMany(Post::class);
}
public function getAvatar(){
return 'https://secure.gravatar.com/avatar/'.md5($this->email).'/?s=45&d=mm';
}
public function getAvatarAttribute(){
return $this->getAvatar();
}
}
Rezultatas:
pertvarkome React komentaro renderinimo išvaizdą:
/resources/assets/js/components/App.js
Visus turimus posts state įrašus "mapinam" po vieną this.state.posts.map(post => ( )) .
...
<div className="col-md-6">
<div className="card">
<div className="card-header">Recent tweets</div>
<div className="card-body">
{this.state.posts.map(post => (
<div key={post.id} className="media">
<div className="media-left">
<img src={post.user.avatar} className="media-object mr-2"/>
</div>
<div className="media-body">
<div className="user">
<a href="#">
<b>{post.user.name} </b>
</a>
</div>
<p>{post.body}</p>
</div>
</div>))}
</div>
</div>
</div>
...
toliau mums reikia pakoreguoti modelį User.php .
/app/User.php
<?php
namespace App;
...
protected $appends = ['avatar'];
public function posts(){
return $this->hasMany(Post::class);
}
public function getAvatar(){
return 'https://secure.gravatar.com/avatar/'.md5($this->email).'/?s=45&d=mm';
}
public function getAvatarAttribute(){
return $this->getAvatar();
}
}
Rezultatas:
Komentarai
Rašyti komentarą