Javascript 不使用路由器渲染新组件

我已经创建了一个应用程序来进行响应，当它启动时，应用程序组件被呈现。我希望当用户单击按钮或链接时，按钮或链接必须位于应用程序组件中。当单击该链接时，将呈现另一个组件，但不在应用程序组件中，但只有新组件将呈现在同一URL中。对于这个新组件，它必须有一个类似的按钮，以便当用户单击时，只渲染应用程序组件，而不渲染用户单击的这个组件，只渲染应用程序组件

我不知道我的解释是否正确。如果你需要澄清，可以问我任何问题

我的应用程序组件如下所示：

import React, { Component } from 'react';
import Touch from './Touch';
import '../App.css';

class App extends Component{

    render() { 
        return(
          <div>
                <div className="wrapper" >
                    <button >NewComponent</button><NewComponent />???
                    <h1>Google Cloud Speech with Socket.io</h1>

                    <p id="ResultText"><span className="greyText">No Speech to Text yet</span></p>

                </div>

                <div className="buttonWrapper" >

                        <button className="btn" id="startRecButton" type="button"> Start recording</button>
                        <button className="btn" id="stopRecButton" type="button"> Stop recording</button>

                </div>


          </div>
         ); 
}
}


export default App

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import App from './components/App.js';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

import React，{Component}来自'React'；
从“/Touch”导入触摸；
导入“../App.css”；
类应用程序扩展组件{
render（）{
返回(
新成员？？？
使用Socket.io的谷歌云语音
还没有语音到文本
开始录音
停止录音
); 
}
}
导出默认应用程序

My index.js如下所示：

import React, { Component } from 'react';
import Touch from './Touch';
import '../App.css';

class App extends Component{

    render() { 
        return(
          <div>
                <div className="wrapper" >
                    <button >NewComponent</button><NewComponent />???
                    <h1>Google Cloud Speech with Socket.io</h1>

                    <p id="ResultText"><span className="greyText">No Speech to Text yet</span></p>

                </div>

                <div className="buttonWrapper" >

                        <button className="btn" id="startRecButton" type="button"> Start recording</button>
                        <button className="btn" id="stopRecButton" type="button"> Stop recording</button>

                </div>


          </div>
         ); 
}
}


export default App

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import App from './components/App.js';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

从“React”导入React；
从“react dom”导入react dom；
导入“/App.css”；
从“./components/App.js”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
ReactDOM.render（，document.getElementById（'root'））；
registerServiceWorker（）；

如果您确实不想使用

react router

，则需要在组件状态中存储一个值，并更改渲染方法以反映按下的按钮。如果希望每个组件都包含需要切换的按钮，请执行以下操作：

class App extends Component {
    constructor(props){
        super(props);
        this.state = {renderA: false,};
    }

    handleClick = (event) => {
        this.setState((prevState) => ({renderA: !prevState.renderA}));
    };

    render = () => {
        return(
            <div>
                {this.state.renderA ? 
                    <ComponentA handleClick={this.handleCLick}/>:
                    <ComponentB handleClick={this.handleCLick}/>
                }
            </div>
        );
    };
} export default App;

// ComponentA
class ComponentA extends Component {
    render = () => {
        return(
            <div>
                // what you want inside your first page here
                <button onClick={this.props.handleClick}
            </div>
        );
    }
} export default ComponentA;

// ComponentB
class ComponentB extends Component {
    render = () => {
        return(
            <div>
                // what you want inside your second page here
                <button onClick={this.props.handleClick}
            </div>
        );
    }
} export default ComponentB;

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={renderA:false，}；
}
handleClick=（事件）=>{
this.setState（（prevState）=>（{renderA:！prevState.renderA}））；
};
渲染=（）=>{
返回(
{this.state.renderA？
:
}
);
};
}导出默认应用程序；
//成分a
类ComponentA扩展了组件{
渲染=（）=>{
返回(
//你想在第一页里看到什么
{
返回(
//你想在第二页里看到什么
如果URL保持不变，我认为React路由器可能帮不了你

如果您希望不加载
应用程序
组件，我认为您应该再创建两个组件，一个
包装器
一个，以及要显示的新组件（从现在开始
新组件
）。我建议：


在
Wrapper
组件的状态内创建属性
isButtonClicked
在
Wrapper
组件内创建函数
handleButtonClick（）
：

handleButtonClick() => {
   let isButtonClicked = !this.state.isButtonClicked;
   this.setState({ isButtonClicked });
}


在
Wrapper
组件的
render（）

render() {
    if (this.state.isButtonClicked)
        return <App />
    else
        return <NewComponent />
}

render（）{
if（this.state.isButtonClicked）
返回
其他的
返回
}


然后，在
应用程序
和
新组件
中，如果单击按钮，则调用
this.props.handleButtonClick（）
，这将导致
包装器
组件的状态发生变化，从而改变屏幕上显示的内容。
我认为在这些情况下URL正在发生变化；有一种方法可以做到这一点，而不必使用“/”更改URL，没有使用Routers我编辑了我的问题，我想我之前没有正确解释。你认为我应该创建第三个组件，其中包括其他两个组件，以便知道状态在其中哪个组件中发生了更改？你将始终需要包含你的应用程序的顶级组件。因此，你需要将当前在你的应用程序中的内容包装到，将您的另一页包装到a中，并根据应用程序的状态呈现组件a或组件B。您可以在组件a和组件B中都有一个按钮，用于更改应用程序的状态并使其呈现其他组件。因此，在顶部包装组件a和组件B的组件中，我需要使用：render=（）=>{return（{this.state.renderA？：}）好吧，我的错，应该是这个.setState（（prevState）=>（{renderA:！prevState.renderA}））；