Javascript 如何使用react js以响应方式显示出现的问题

我使用react开发what's up web。我的场景是，当我在桌面上执行时，它将显示在桌面响应中，当我在移动设备上显示时，它将显示在移动响应中，如何在react中执行。 下面我可以添加我为显示what's up web而开发的每个页面。我想在手机中像what's up应用程序那样显示如何开发。单击此处的输入说明，它将显示我开发的图像。但我只需要一个应用程序就可以同时具有responsivness和web。这意味着我需要一个url whats web和mobile whats应用程序

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;

---

响应性设计并不是您在React中所做的不同。您仍然可以在浏览器中运行相同的旧HTML、CSS和JS

---

阅读更多关于

说“尽快告诉我”是不礼貌的，而且对于移动反应性页面来说，“反应本机”也是一种方式。你可以向前看。很抱歉，我说了那句话。我必须只做反应，不做反应。我很抱歉说那句话。我必须只做反应，不做反应。