将数据传递反应成分

我试图代码，我们的看法应用的UI，将数据传递反应成分

（项目回购https://github.com/Lv-246Python/myTrip）

，我就不能得到我应如何构建我的反应的组分以及从数据库获取真实评论的流程是什么。我知道我必须使用'axios'，但我如何编码“这是领域将充满什么'axios'给你”？

这里是我的代码如下，如果你需要更多我当前的分支是（33评论反应组件），谢谢。

comment.js

import React from 'react'; 

import Paper from 'material-ui/Paper'; 
import Divider from 'material-ui/Divider'; 
import List from 'material-ui/List/List'; 

import {CommentItem} from './comment_item'; 
import {CommentForm} from './comment_form'; 

const styles = { 
    paper: { 
     paddingLeft: 15, 
     paddingRight: 15, 
     paddingBottom: 15, 

     marginLeft: 15, 
     marginRight: 15, 
     marginBottom: 15 
    }, 

    divider: { 
     backgroundColor: 'grey' 
    } 

}; 

export default class Comment extends React.Component { 
    render() { 
     return (
      <Paper zDepth={5} rounded={false} style={styles.paper}> 
       <div> 
        <List> 
         <CommentItem/> 
         <CommentItem/> 
        </List> 

        <Divider style={styles.divider}/> 
        <CommentForm/> 
       </div> 
      </Paper> 
     ); 
    } 
}

comment_item.js

import React from 'react'; 

import {Card, CardActions, CardHeader, CardText} from 'material-ui/Card'; 
import Avatar from 'material-ui/Avatar'; 
import FlatButton from 'material-ui/FlatButton'; 
import ListItem from 'material-ui/List/ListItem'; 


const styles = { 
    avatar: { 
     marginRight: 10, 
     marginBottom: 10 
    }, 

    commentText: { 
     fontSize: 20 
    }, 

}; 

export class CommentItem extends React.Component { 
    render() { 
     return (
      <ListItem> 
       <Card> 
        <CardHeader 
         title="Roman Hrytskiv" 
         subtitle="29/07/2017" 
         expandable={true} /> 

        <CardText 
         actAsExpander={true} 
         style={styles.commentText}> 
         <UserAvatar /> 
         Nice views man! 
         <br /> 
         I wish I could go there with you but i have to code. See you in a month! 
        </CardText> 

        <CardActions 
         expandable={true}> 
         <FlatButton label="Edit" /> 
         <FlatButton label="Delete" /> 
        </CardActions> 

       </Card> 
      </ListItem> 
     ); 
    } 
} 

class UserAvatar extends React.Component { 
    render() { 
     return (<Avatar src="static/src/img/avatar.jpg" size={40} style={styles.avatar}/>); 
    } 
}

来源

2017-07-30 Roman

可能您必须创建REST API并使用GET请求接收数据。您可以使用django rest框架为django应用程序创建REST API。 – pkisztelinski

您需要考虑再次对documentation作出反应，并尝试获得state and props的概念。当应用程序加载时，您需要提供API请求以从您可能创建的REST API中获取数据。然后，请求成功后，您需要使用该数据设置状态，然后使用该状态在组件上查看数据。您必须阅读有关反应的生命周期方法以及在哪个时间点调用哪个函数。稍后，当您经历反应架构并了解其生命周期方法时，您必须考虑了解redux。

This是我发现的用于学习react和redux的最佳在线课程。如果有疑问，你可以考虑检查一下。

来源

2017-07-31 10:02:57

考虑使用Flux架构。你可以选择纯粹的Flux（Facebook Flux utils）或基于Flux的一些框架。我个人推荐Redux。

由于React不是一个框架，它不能解释这样的事情，但Redux（或类似）将帮助你。

理解Flux/Redux流程需要一些时间，但它是值得的。

来源

2017-07-30 10:14:57 lemurry

将数据传递反应成分

回答

相关问题