Javascript 如何返回路径中的组件？（语法错误）

组件的
返回
中存在语法错误，因此应用程序无法运行（无法在浏览器中呈现），如何
返回
路径中的
组件
？
问题在这里（返回应用程序）：

{return}}/>
{this.state.roomsList.map（（元素，键）=>{
返回(
);
})}}/>

我共享所有组件以帮助理解：

App.js：

import React, { Component } from "react";
// import 'bootstrap/dist/css/bootstrap.min.css'
// import './App.css';
import Addroom from "./components/Addroom.js";
import Room from "./components/Room.js";
import {BrowserRouter as Router,Switch,Route,Link} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';

export default class App extends Component {
  state = {
    roomsList: []
  };

  create = r => {
    this.setState({
      roomsList: [...this.state.roomsList, r],
      
    });
  };

  render() {
    return (
      <div className="backGroundMain" style={{backgroundColor: "lightseagreen", height: "600px", width: "850px"}}>
        <h1 style={{backgroundColor: "aquamarine", height: "40px", width: "270px", borderRadius: "5px", border: "2px", margin: "15px"}} >My Smart House</h1>

<Router>

 <div className="row">

   <div className="col-6"><Link to='/room'>My Rooms</Link></div>
   <div className="col-6"><Link to='/'>Create Room</Link></div>

   </div>

<Switch>
        
<Route exact path='/' component={()=>{    return  <Addroom {
      
       <button style={{backgroundColor: "aquamarine", height: "20px", width: "60px", borderRadius: "5px", border: "2px"}} onClick={add=this.create}>Create</button>}/>}}/>


<Route exact path='/room' component={()=>{this.state.roomsList.map((element, key) => {
          return (
            <Room
              id={key + 1}
              key={key}
              r={element.room}
              rt={element.roomType}
              ct={element.colorType}
              sr={element.boxColor}
            />
          );
        })}}/>

</Switch>
</Router>

      </div>
    );
  }
}

import React，{Component}来自“React”；
//导入“bootstrap/dist/css/bootstrap.min.css”
//导入“/App.css”；
从“/components/Addroom.js”导入Addroom；
从“/components/Room.js”导入文件室；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Link}；
导入'bootstrap/dist/css/bootstrap.min.css'；
导出默认类应用程序扩展组件{
状态={
客房名单：[]
};
create=r=>{
这是我的国家({
roomsList:[…this.state.roomsList，r]，
});
};
render（）{
返回(
我的智能房子
我的房间
创造空间
{return}}/>
{this.state.roomsList.map（（元素，键）=>{
返回(
);
})}}/>
);
}
}

Room.js：

import React, { Component } from "react";

export default class Room extends Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    const { id, r, rt, ct, sr } = this.props;
    return (
      <div className="Box" style={{backgroundColor: sr, height: "170px", width: "170px", margin: "30px"}}> 
        <h3>
          Room {id}: {r}{" "}
        </h3>
        <h3>
          Room Type {id}: {rt}
        </h3>
        <h3>
          Room Color {id}: {ct}
        </h3>
      </div>
    );
  }
}

import React，{Component}来自“React”；
导出默认教室扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
}
render（）{
const{id，r，rt，ct，sr}=this.props；
返回(
房间{id}：{r}{''}
房间类型{id}:{rt}
房间颜色{id}:{ct}
);
}
}

Addroom.js：

import React, { Component } from "react";

export default class Addroom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      roomNameInputColor: "white",
      roomTypes: ["kitchen", "bathroom", "bedroom"],
      roomSelected: "kitchen",
      colorTypes: ["red", "green", "blue", "teal", "mediumblue", "mediumorchid", "wheat", "Steelblue"],
      colorSelected: "red"
    };
  }


  addRoomName = e => {
    const room = e.target.value;

    let roomNameInputColor = "white";
    if (e.target.value.length >= 5) {
      roomNameInputColor = "green";
    } else {
      roomNameInputColor = "red";
    }

    this.setState({ room, addRoomName: room, roomNameInputColor });
  };

  createRoom = () => {
    this.props.add({
      room: this.state.room,
      roomType: this.state.roomSelected,
      colorType: this.state.colorSelected,
      boxColor: this.state.colorSelected
    });
  };

  createRoomType = () => {
    this.props.addRoomType(this.state.roomSelected);
  };

  createColorType = () => {
    this.props.addColorType(this.state.colorSelected);
  };

  createBoxColor = () => {
    this.props.colorTheBox(this.state.colorSelected);
  };


  setCategory = roomSel => {
    this.setState({ roomSelected: roomSel });
  };

  setColorCategory = colorSel => {
    this.setState({ colorSelected: colorSel });
  };

  render() {
    return (
      <div className="backGroundAddRoom" style={{backgroundColor: "mediumaquamarine", height: "93px", width: "200px", margin: "15px"}}>
        {/* //Select Room Type */}
        <select onChange={e => this.setCategory(e.target.value)}>
          {this.state.roomTypes.map((type, key) => (
            <option key={key} value={type}>
              {type}
            </option>
          ))}
        </select>
        <br />

        {/* //Select Room Color */}
        <select onChange={e => this.setColorCategory(e.target.value)}>
          {this.state.colorTypes.map((type, key) => (
            <option key={key} value={type}>
              {type}
            </option>
          ))}
        </select>
        <br />

        <input
          onChange={this.addRoomName}
          style={{ backgroundColor: this.state.roomNameInputColor }}
          placeholder="Name Your Room"
        />
        <br />

        <button style={{backgroundColor: "aquamarine", height: "20px", width: "60px", borderRadius: "5px", border: "2px"}}
         onClick={this.createRoom}>Create</button>
      </div>
    );
  }
}

import React，{Component}来自“React”；
导出默认类Addroom扩展组件{
建造师（道具）{
超级（道具）；
此.state={
roomNameInputColor:“白色”，
房间类型：[“厨房”、“浴室”、“卧室”]，
选定房间：“厨房”，
颜色类型：[“红”、“绿”、“蓝”、“青”、“中蓝”、“中兰花”、“小麦”、“钢蓝”]，
选定颜色：“红色”
};
}
addRoomName=e=>{
const room=e.目标值；
让roomNameInputColor=“白色”；
如果（e.target.value.length>=5）{
roomNameInputColor=“绿色”；
}否则{
roomNameInputColor=“红色”；
}
this.setState（{room，addRoomName:room，roomNameInputColor}）；
};
createRoom=（）=>{
这个.props.add({
房间：这个，州，房间，
roomType:this.state.roomSelected，
colorType:this.state.colorSelected，
boxColor:this.state.colorSelected
});
};
createRoomType=（）=>{
this.props.addRoomType（this.state.roomSelected）；
};
createColorType=（）=>{
this.props.addColorType（this.state.colorSelected）；
};
createBoxColor=（）=>{
this.props.colorTheBox（this.state.colorSelected）；
};
setCategory=roomSel=>{
this.setState（{roomSelected:roomSel}）；
};
setColorCategory=colorSel=>{
this.setState（{colorSelected:colorSel}）；
};
render（）{
返回(
{/*//选择房间类型*/}
this.setCategory（e.target.value）}>
{this.state.roomTypes.map（（类型，键）=>(
{type}
))}


{/*//选择房间颜色*/}
this.setColorCategory（e.target.value）}>
{this.state.colorTypes.map（（类型，键）=>(
{type}
))}




创造
);
}
}
this.state.roomsList.map（（元素，键）=>{
返回(
);
})

将上述地图放在一个组件中，然后使用

<Route exact path='/room' component={RoomListComponent}/>

检查Route的渲染属性
{}/>
。
this.state.roomsList.map((element, key) => {
      return (
        <Room
          id={key + 1}
          key={key}
          r={element.room}
          rt={element.roomType}
          ct={element.colorType}
          sr={element.boxColor}
        />
      );
    })

<Route exact path='/room' component={RoomListComponent}/>