码迷,mamicode.com
首页 > 其他好文 > 详细

[Preact] Use State and Props in the Component Render Function

时间:2017-06-17 23:18:51      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:set   turn   color   react   ret   cat   long   use   tar   

Preact offers, in addition to the regular component API from React, the ability to access both props & state as function parameters to the render method. This lesson will cover an example of how to utilize this convenience along with how destructuring can make it even nicer to work with.

 

import {h, Component} from ‘preact‘;
import User from ‘./User‘;

export default class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            loading: true,
            user: null
        };
    }

    componentDidMount() {
        fetch(this.props.config.urls.user)
            .then(resp => resp.json())
            .then(user => {
                this.setState({
                                  user,
                                  loading: false
                              });
            })
            .catch(err => console.error(err));
    }

   // render(props, state) {
    render({config}, {loading, user}) {
        return (
            <div class="app">
                {loading
                    ? <p>Fetching {config.urls.user}</p>
                    : <User image={user.avatar_url}
                            name={user.name} />
                }
            </div>
        );
    }
}

 

[Preact] Use State and Props in the Component Render Function

标签:set   turn   color   react   ret   cat   long   use   tar   

原文地址:http://www.cnblogs.com/Answer1215/p/7041502.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!