如何使用 react js 以响应方式显示最新消息

Question

enter image description herei 使用 react 开发 web 最新动态。我的情况是，当我在桌面上执行时，它将显示在桌面响应式中，而每当我在移动设备中显示时，它将以移动响应式显示如何响应。 下面我可以添加我开发的每个页面以显示 web 上的内容。我想在移动设备上显示怎么了 up 应用程序，所以如何开发。单击此处输入说明它将显示我开发的图像。但我只需要一个应用程序同时拥有响应能力和网络。这意味着我想要一个网址，我想要什么网络和移动什么应用程序。

ChatListHeader.js

import React, { Component } from 'react';

class ChatListHeader extends Component {
render(){
    return(
        <div className="chatlist--header">
          <div className="chatlist--header__image">
            <img src={require('/home/srinath/Desktop/important/whats up web ui complete/whats up web 
 ui/src/images/Srinath.png')} alt={""}/>
          </div>
          <div className="chatlist--header__icons">
            <i className="material-icons">&#xE85A;</i>
            <i className="material-icons">&#xE5D4;</i>
          </div>
        </div>
    )
 }
 }

export default ChatListHeader;

import React, { Component }     from 'react';
import ChatListHeader           from '../presentational/ChatListHeader';
import ChatListSearch           from './ChatListSearch';
import List                     from './List';

class ChatList extends Component {
    render(){
        return(
            <div className="chatlist">

            <ChatListHeader />
            <ChatListSearch />
            <List contacts={this.props.contacts} getChats={this.props.getChats}/>

          </div>
        )
    }
}

export default ChatList;

import React, { Component } from 'react';


class ChatListSearch extends Component {
    render(){
        return(
            <div className="chatlist--search" style={{"position": "relative"}}>
              <input type="" placeholder="search or start a new chat"/>
              <img src={require('../../images/searchicon.png')} alt={""} style={{"width": "15px", "position":"absolute","bottom":"18px","left":"20px","fontSize":"15px"}} />
            </div>
        )
    }
}


export default ChatListSearch;

import React, { Component }     from 'react';
import ListItem                 from '../presentational/ListItem';

class List extends Component {
    render(){
        let listitem = this.props.contacts.map((item) => {
            return <ListItem item={item} key={item.id} getChats={ this.props.getChats }/>
        })
        return(
            <div className="list">
                {listitem}
            </div>
        )
    }
}

export default List;
import React, { Component } from "react";

class ListItem extends Component {
    render(){
      let item = this.props.item;
      return (
         <div className="list--item" onClick={ (event) => { this.props.getChats(event, item.id) } }>
            <div className="list--item__image">
                <img src={item.profilePhoto} alt={item.name}/>
            </div>


        <div className="list--item__details">
                <h3>{item.name}</h3>
                <p>{item.lastMessage}</p>
            </div>
        </div>
      )
    }
}


export default ListItem;
import React, { Component }     from 'react';
import ViewWhatsapp             from '../presentational/ViewWhatsapp';  
import ViewChatHistory          from './ViewChatHistory';    

class View extends Component {
    render(){
        let visibility = this.props.visibility;
        let view;
        view = (visibility) ? <ViewChatHistory selectedContactChat={ this.props.selectedContact } /> : <ViewWhatsapp />
        return(
         <div className="view" style={{"display": "flex", "flexGrow": "1"}}>
                { view }
          </div>
        )
    }
}

export default View;   
import React, { Component } from 'react';


class ViewChatHistory extends Component{
    render(){
        console.log(this.props.selectedContactChat);
        return(

            <div className="view--chat" >
            {
                this.props.selectedContactChat.map( (contact) =>{
                    return (
                        <header key={contact.id} >
                            <div className="user-details">
                                <img src={contact.profilePhoto} style={{"width": "45px", "height": "40px", "borderRadius": "100%", "marginRight": "20px"}} alt={""}/>
                                <div className="user-details-name">
                                    <h3>{contact.name}</h3>
                                </div>
                            </div>

                            <nav className="extra-icons" style={{"width": "120px", "display": "flex", "justifyContent" : "space-between", "marginTop" : "10px"}}>
                                <i className="material-icons">&#xE8B6;</i>
                                <i className="material-icons">&#xE226;</i>
                                <i className="material-icons">&#xE5D4;</i>


                            </nav>

                        </header>

                    )
                })
            }



        </div>
        )
    }
}

export default ViewChatHistory;

Answer 1

响应式设计并不是你在 React 中做的“不同”的事情。您仍然在浏览器中运行相同的旧 HTML、CSS、JS。

阅读更多关于responsive design 的信息