首页 > 其他 > 详细

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

时间:2017-06-17 23:15:32      阅读:265      评论:0      收藏:0      [点我收藏+]

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!