將數據傳遞反應成分

我試圖代碼，我們的看法應用的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

將數據傳遞反應成分

回答

相關問題