Question

我想知道我们是否可以在HTML中添加多个react组件而不用通常通过npm下载相关文件，或者是否将其添加到普通HTML中，但是我们尝试为聊天应用添加某个组件，这是一个很长的示例：

<html lang="en">
<head>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    </head>
<body>
    <div id="app"></div>
    
    
     <script  type="text/babel">
    
    class App extends React.Component{
    
        state={
    messages:[
      { }
    ],
    userId:''
  }

addMessage=(message)=>{
      message.num = Math.random();
      message.id=this.state.messages.id;
     let messages = [...this.state.messages, message];
   this.setState({
     messages      })
  }
addId=(userId)=>{
  this.setState({
    userId
  })
}
  render() {
    return (
      <div className="appContainer">
        <User userId={this.addId} />
        <TopSection Users={this.state.userId}/>
        <Messages userId = {this.state.userId} messages={this.state.messages}/>
        <AddMessage addMessage={this.addMessage} />
      </div>
    );
  }
}
}

const Messages = ({messages, userId}) =>{ 

const messageList= (messages.length)? (messages.slice(1).map(message=>{
    return(
        <div className="message" key={message.num}>
            <span key={userId.num}>{message.content?(userId):(null)}</span>
             <p>{message.content}</p>
        </div>
    )
})) : (null);


return(
<div className="textContainer">
    {messageList}
</div>
)
}

 
ReactDOM.render(<App />, document.getElementById('app'));

    </script>
</body>
</html>

请让我知道是否有足够的空间使它工作。

Answer 1

您的意思是将组件添加到不同的dom节点吗？

import {render} from 'reactDOM'
import React from 'react'
import AppOne from './appOne'
import AppTwo from './appTwo'

render(<AppOne />, document.getElementById('appOne'));
render(<AppTwo />, document.getElementById('appTwo'));

React v16也具有用于将组件网络添加到dom树的不同部分的门户网站

如何将多个React组件添加到HTML

1 个答案: