Я хочу создать раздел комментариев для своих сайтов (на самом деле это не имеет отношения к вопросу, но помогает понять код). Я определил строку с именем CommentsListText, которая содержит все комментарии, и теперь я хочу добавить ее к возвращаемому компоненту. Как я могу это сделать ?

import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import Checkbox from '@material-ui/core/Checkbox';
import Avatar from '@material-ui/core/Avatar';
import Paper from '@material-ui/core/Paper';
import CommentTextTemplate from './CommentTextTemplate';
import Grid from '@material-ui/core/Grid';
import {connect} from 'react-redux';
import {fetchCommentsWithRedux} from '../../actions/FetchComments';


class CommentsList extends React.Component {
  componentDidMount(){
    this.props.fetchCommentsWithRedux(this.props.courseId,this.props.option);
  }
  render() {
    const { classes,comments } = this.props;
    let commentsListText = "";
    var i;
    let comment;
    for (i=0;i<comments.length;i++){
      comment = comments[i];
      if(!!comment.parent_id){
        continue;
      }
      commentsListText +="<Grid item className={classes.commentL1} >"+
      "<Paper className={classes.commentL1Paper} >"+
        "<ListItem dense className={classes.listItem}>"+
            '<Avatar alt="phebie boffei" src="/src/public/avatar.jpg" className={classes.commentAvatar}/>'+
          '<CommentTextTemplate/>'+
        "</ListItem>";
      let innerCommentsList = comments.find((singleComment)=>{
        return singleComment.parent_id == i;
      })
      var j;
      if(!!innerCommentsList){
        for (j=0;j<innerCommentsList.length;i++){
          let singleInnerComment = innerCommentsList[j];
          commentsListText +="<Grid item className={classes.commentL1} >"+
        "<Paper className={classes.commentL1Paper} >"+
          "<ListItem dense className={classes.listItem}>"+
              '<Avatar alt="phebie boffei" src="/src/public/avatar.jpg" className={classes.commentAvatar}/>'+
            '<CommentTextTemplate/>'+
          "</ListItem></Paper></Grid>";
        }
      }
      commentsListText +='</Paper></Grid>';
      // commentsListText = "<Grid><ListItem >hamid karami sarini</ListItem></Grid>"
      // console.log(commentsListText);
    }
    return (
      <List>
        {/* Here I want to show the comments List. */}
        {/* <div dangerouslySetInnerHTML={{ __html: commentsListText }} /> */}
      </List>
    );
  }
}

const mapStateToProps = ({Comments}) => {
  return Comments;
};

export default withStyles(styles)(connect(mapStateToProps,{fetchCommentsWithRedux})(CommentsList));

Решение, которое я нашел, заключалось в использовании:

<div dangerouslySetInnerHTML={{ __html: commentsListText }} />

Но это работает только с тегами HTML. Как мне преобразовать мою строку в React Component?

0
Hamid 5 Окт 2018 в 21:41

1 ответ

Лучший ответ

У вас должны быть функции, которые выполняют эту итерацию за вас и возвращают элемент, вот фрагмент. Имейте в виду, что код может потребовать некоторых корректировок.

class CommentsList extends React.Component {
    componentDidMount() {
        this.props.fetchCommentsWithRedux(this.props.courseId, this.props.option);
    }

    renderCommentsList(comments, classes) {
        comments.filter(comment => !!comment.parent_id).map((comment, index) => (
            <Grid item className={classes.commentL1}>
                <Paper className={classes.commentL1Paper} >
                    <ListItem dense className={classes.listItem}>
                        <Avatar alt="phebie boffei" src="/src/public/avatar.jpg" className={classes.commentAvatar} />
                        <CommentTextTemplate />
                    </ListItem>
                    {
                        comments.find(singleComment => singleComment.parent_id == index).map(innerComment => (
                            <Grid item className={classes.commentL1} >
                                <Paper className={classes.commentL1Paper} >
                                    <ListItem dense className={classes.listItem}>
                                        <Avatar alt="phebie boffei" src="/src/public/avatar.jpg" className={classes.commentAvatar} />
                                        <CommentTextTemplate />
                                    </ListItem>
                                </Paper>
                            </Grid>
                        ))
                    }
                </Paper>
            </Grid>
        ))
    }

    render() {
        const { classes, comments } = this.props
        return (
            this.renderCommentsList(comments, classes)
        );
    }
}
1
Danilo Lemes 5 Окт 2018 в 19:37