React.js 信息发送接收的模板

ReactJS Direct Messaging

React.js, 模板

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2187
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

// Data
var data = {
    recipient: {
        id: 2,
        firstname: 'Jack-Edward',
        surname: 'Oliver',
        email: 'mrjackolai@gmail.com'
    },
    sender: {
        id: 1
    },
    messages: [{
        sender: 1,
        message: 'This is a message, yo'
    }, {
        sender: 1,
        message: 'This is a second message from the same person!'
    }, {
        sender: 2,
        message: 'This is a reply, boo!'
    }]
};
////////////////
// COMPONENTS //
////////////////

// App Container
var App = React.createClass({
    displayName: 'App',

getDefaultProps: function getDefaultProps() {
        return data;
    },
    handleSubmit: function handleSubmit(event) {
        var value = $('.messageInput').val();
        console.log(value);
        var message = {
            sender: 1,
            message: value
        };
        this.props.messages.push(message);
        this.pushMessage();
        this.forceUpdate();
        $('.messageInput').val("");
        event.preventDefault();
    },
    pushMessage: function pushMessage() {
        var that = this;
        setTimeout(function() {
            var message = {
                sender: 2,
                message: 'I\'m a made up message yo, sent every time you reply'
            };

that.props.messages.push(message);
            that.forceUpdate();
        }, 500);
    },
    render: function render() {

return React.createElement(
            'div', {
                className: 'App'
            },
            React.createElement(Conversation, {
                messages: this.props.messages,
                recipient: this.props.recipient
            }),
            React.createElement(Input, {
                onSubmit: this.handleSubmit
            })
        );
    }
});

// Conversation
var Conversation = React.createClass({
    displayName: 'Conversation',

render: function render() {
        return React.createElement(
            'div', {
                className: 'Conversation'
            },
            React.createElement(Header, {
                name: this.props.recipient.firstname
            }),
            React.createElement(
                'div', {
                    className: 'container'
                },
                React.createElement(Messages, {
                    messages: this.props.messages
                })
            )
        );
    }
});

var Header = React.createClass({
    displayName: 'Header',

render: function render() {
        return React.createElement(
            'header',
            null,
            React.createElement(
                'div', {
                    className: 'name'
                },
                this.props.name
            )
        );
    }
});

var Messages = React.createClass({
    displayName: 'Messages',

render: function render() {

var messages = this.props.messages.map(function(message, i) {
            return React.createElement(Message, {
                message: message.message,
                sender: message.sender
            });
        });

return React.createElement(
            'div', {
                className: 'Messages'
            },
            messages
        );
    }
});

var Message = React.createClass({
    displayName: 'Message',

render: function render() {
        if (this.props.sender === 1) {
            var classNames = "Message Message--you";
        } else {
            var classNames = "Message Message--them";
        }

return React.createElement(
            'div', {
                className: classNames
            },
            React.createElement(
                'span',
                null,
                this.props.message
            )
        );
    }
});

// Input
var Input = React.createClass({
    displayName: 'Input',

render: function render() {
        return React.createElement(
            'form', {
                onSubmit: this.props.onSubmit,
                className: 'Input'
            },
            React.createElement('input', {
                className: 'messageInput',
                name: 'message',
                type: 'text',
                placeholder: 'Enter your message...'
            }),
            React.createElement(
                'button',
                null,
                React.createElement('i', {
                    className: 'fa fa-send'
                })
            )
        );
    }
});

////////////
// RENDER //
////////////
ReactDOM.render(React.createElement(App, null), document.getElementById('app'));

编译

CSS

@import "https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700";
#app {
    background: url(http://static1.squarespace.com/static/55acc005e4b098e615cd80e2/5777d3433e00be9cc0d8e3f6/5794e11ee4fcb508439092c7/1469374779773/IMG_3487.jpg?format=2500w);
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-family: 'Open Sans', sans-serif;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100vh;
}
.App {
    height: 520px;
    width: 320px;
    box-shadow: 0 10px 20px rgba(19, 27, 35, 0.075);
}
@media screen and (max-width: 600px) {
    .App {
        width: 100vw;
        height: 100vh;
    }
}
.App .Conversation {
    height: calc(100% - 60px);
    width: 100%;
}
.App .Input {
    height: 60px;
    background: rgba(193, 207, 218, 0.8);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    box-sizing: border-box;
    padding: 10px;
}
.App .Input input {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    border-radius: 44px;
    height: 40px;
    box-sizing: border-box;
    border: 0;
    padding: 0 20px;
    color: #131B23;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    outline: none;
}
.App .Input button {
    background: #4d6b82;
    height: 44px;
    color: white;
    font-size: 18px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 44px;
    border: 0;
    border-radius: 50px;
    margin-left: 10px;
}
header {
    height: 44px;
    background: rgba(255, 255, 255, 0.9);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid #EEE;
    color: #131B23;
}
.Conversation .container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: calc(100% - 45px);
    overflow-y: auto;
    box-sizing: border-box;
    background: rgba(233, 241, 247, 0.95);
    padding: 10px 0;
}
@media screen and (max-width: 640px) {
    .Conversation .container {
        background: rgba(233, 241, 247, 0.1);
    }
}
.Conversation .container .Messages {
    width: 100%;
}
.Conversation .container .Messages .Message {
    padding: 5px 20px;
}
.Conversation .container .Messages .Message:last-child {
    padding-bottom: 20px;
}
.Conversation .container .Messages .Message span {
    padding: 10px;
    box-sizing: border-box;
    font-size: 12px;
    display: inline-block;
    font-weight: 600;
    max-width: 80%;
    line-height: 1.4;
    border-radius: 3px;
}
.Conversation .container .Messages .Message--them span {
    background: white;
    box-shadow: 0 5px 10px rgba(19, 27, 35, 0.05);
    color: rgba(19, 27, 35, 0.9);
}
.Conversation .container .Messages .Message--you {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.Conversation .container .Messages .Message--you span {
    background: #014159;
    color: white;
}

HTML

ReactJS Direct Messaging

React.js, 模板

编辑器支持Emmet

快捷键

ReactJS Direct Messaging

React.js, 模板

React.js 简易的电商商品展示模板

React.js 可调节最长信息输入字符数的TWEET表单

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：