Question

我想为我的网站创建一个评论部分（实际上与问题无关，但有助于理解代码）。我定义了一个名为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？

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

如何将String转换为React可以正常渲染的东西？

1 个答案: