Question

我正在尝试为我们的评论应用编写用户界面，

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

我无法理解我应该如何构建我的React组件以及从DB获取实际注释的流程是什么。我知道我必须使用＆＃39; axios＆＃39;但我如何编码＆＃34;这个字段将充满什么＆＃39; axios＆＃39;给你＆＃34;？

以下是我的代码，如果您需要更多我当前的分支是（33-comment-react-component），谢谢。

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}/>);
    }
}

Answer 1

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

由于React不是框架，因此无法解释此类内容，但Redux（或类似）会对您有所帮助。

了解Flux / Redux流程需要一些时间，但值得。

Answer 2

你需要考虑重新审视documentation的反应并尝试获得state and props的概念。当应用程序加载时，您需要发出API请求以从您可能已创建的REST API获取数据。然后在请求成功后，您需要使用该数据设置状态，然后使用该状态在组件上查看数据。您必须阅读有关反应的生命周期方法以及在什么时间点调用的函数。稍后，一旦您了解了反应体系结构并了解其生命周期方法，您必须考虑学习redux。

This是我发现的学习反应和减少的最佳在线课程。如果有疑问，你可以考虑检查它。

将数据从DB传递到React组件

2 个答案: