时间戳

首页 > 解决方案 > 您如何通过仅针对某些项目的数组在地图中制作地图？

reactjs - 您如何通过仅针对某些项目的数组在地图中制作地图？

问题描述

到目前为止，除了一个问题外，地图运行良好，每次我单击按钮发表评论时，都会有一个全新的帖子填充 UI。我想要的是每次单击帖子评论按钮时只呈现评论而不是整个帖子。我试图做的是在地图中做地图，如下所示。但是它仍然呈现整个帖子。我如何映射某个项目，我认为这会有所帮助。我应该怎么办？

const { TextArea } = Input;


const PostOnWall = (props) => (
    <div>
        {props.postInfo.map( (item) => (
            <div>
                <div className="PostOnWall">
                        <div className="topbar">
                            <img src = {profile} className="image"/>
                            <div className="name">Brad Pitt</div>
                            <div>{item.time}</div>
                        </div>
                    <div className="text">{item.post}</div>
                    <img src={item.uploadedImage} />

                </div>
                <div className="engagementBar">
                    <div><FontAwesomeIcon  icon={fathumbsup} size="2x"/> Like</div>
                    <div><FontAwesomeIcon  icon={facomment} size="2x"/> Comment</div>
                    <div><FontAwesomeIcon  icon={fasharesquare} size="2x"/> Share</div>
                </div>
                <div className="postCommentBox">
                <img src = {profile} className="image"/>
                <TextArea type = "text" placeholder="Write a comment" autoSize id="comment" onChange={props.onChange}/>
                <div>    
                    <button onClick={props.onClick}></button>
                </div>                
                </div>
                {item.comment.map( (items) => (
                <div>
                    <div> {items} </div>
                </div>
                ))
            }

    </div>
    ))
    }

    </div>
)

标签： reactjs

解决方案

我认为以目前的结构，仅重新呈现评论是不可能的。为了实现这一点，您可能需要将评论移至单独的组件。

另一件重要的事情我发现你在渲染列表时不会使用key，所以它会大大降低性能，因为 React 需要在每次渲染时重新渲染整个列表。你可以在这里阅读：https ://reactjs.org/docs/lists-and-keys.html

推荐阅读