向 reactjs 和 Firebase 聊天室添加投票答案

【问题标题】：Adding upvotes to reactjs and Firebase chatroom向 reactjs 和 Firebase 聊天室添加投票
【发布时间】：2016-11-21 19:29:18
【问题描述】：

https://github.com/kristinyim/ClassroomChat

我想在这个聊天室的消息中添加一个投票功能，类似于您在 GroupMe 上的功能，但我是 React 新手，并且是根据教程构建的，所以甚至不知道从哪里开始。我很擅长 webdev，但我才刚刚开始接触 React.js 和 Firebase 的基础知识。谢谢！

【问题讨论】：

从您的 repo 中的代码无法得知您的 firebase 数据库的结构。你能把它添加到你的问题中吗？

标签： reactjs firebase react-jsx

【解决方案1】：

注意：有很多方法可以实现，所以以下只是一个建议。

首先，您必须考虑如何将数据存储在数据库中。如果你有用户、消息和类似消息，你可以这样构建它：

"root": {
    "users": {
        "$userId": {
            ...
            "messages": {
                "$messageId1": true,
                "$messageId2": true,
                ...
            }
        }
    },
    "messages": {
        "$messageId": {
            "author": $userId,
            "timestamp": ServerValue.TIMESTAMP
        }
    },
    "likesToMessages": {
        "$messageId": {
            "$likeId": {
                liker: $userId,
                "message": $messageId,
                "timestamp": ServerValue.TIMESTAMP
            }
        }
    }
}

每当用户在消息上点击“喜欢”时，您就想写信给

var messageId = ?; // The id of the message that was liked
var like = {
    liker: currentUserId, // id of logged in user
    message: messageId,
    timestamp: firebase.database.ServerValue.TIMESTAMP      
};
firebase.database.ref().child('likesToMessages').child(messageId).push(like);

然后你在数据库中得到一个新的like，与建议的结构相匹配。

然后，当您想要阅读并显示一条消息的点赞数时，您可以这样做：

const Message = React.createClass({
    propTypes: {
        message: React.PropTypes.object,
        messageId: React.PropTypes.string // you need to add this prop
    }

    componentWillMount() {
        firebase.database.ref().child('likesToMessages').child(this.props.messageId).on('value', this.onLikesUpdated)
    }

    onLikesUpdated(dataSnapshot) {
        var likes = snap.val();
        this.setState({
            likes
        });
    }

    render() {
        const {name, message} = this.props.message;
        const emojifiedString = emoji.emojify(message);

        return (
            <p>
                {name}: {emojifiedString} [{this.state.likes.length}&hearts;]
            </p>
        );
    }
});

此外，在您的数据库安全规则中，您希望通过timestamp 为消息等建立索引，以便您可以快速查询最新消息。

另外，请随时查看我制作的类似应用程序，代码在 GitHub 和演示在 wooperate.firebaseapp.com。

【讨论】：