Question

我已经为React创建了一个应用程序，当它启动时，将呈现App组件。我希望当用户单击按钮或链接时，单击该链接时该按钮或链接必须位于App组件中，将呈现另一个组件，但不呈现在App组件内部，而仅呈现新组件在相同的网址中。对于此新组件，它必须具有类似的按钮，以便在用户单击时仅呈现App组件，而在用户单击时不呈现该用户组件，而仅呈现App组件。

我不知道我是否正确解释了自己。问我任何问题是否需要澄清。

我的应用程序组件如下：

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

我的index.js如下：

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();

Answer 1

如果您真的不想使用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;

但是使用react-router也可能适合您的情况，如果您要编写一个大型应用程序，则应使用它，而不要根据用户的输入在同一组件中呈现不同的子组件。

Answer 2

如果URL保持不变，我认为React-Router可能对您没有帮助。

如果您希望未加载App组件，我认为您应该再创建两个组件，一个Wrapper，以及要显示的新组件（从现在开始{{1} }。我建议是：

在newComponent组件状态内创建属性isButtonClicked；
在Wrapper组件内创建函数handleButtonClick()：
```
Wrapper
```
在handleButtonClick() => { let isButtonClicked = !this.state.isButtonClicked; this.setState({ isButtonClicked }); }组件的render()方法中，您将编写如下内容：
```
Wrapper
```

然后，在render() { if (this.state.isButtonClicked) return <App /> else return <NewComponent /> }和App中，如果您单击按钮，就会调用NewComponent，这将导致this.props.handleButtonClick()的状态改变组件，因此要更改屏幕上显示的内容。

在不使用路由器的情况下渲染新组件

2 个答案: