javascript - 如何在 ReactJs 中单击按钮时加载新组件?
问题描述
ReactJs
我在调用中创建了一个主要组件MainPage
(使用 Material-UI)。
import React from 'react';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import withStyles from '@material-ui/core/styles/withStyles';
const styles = theme => ({
card: {
minWidth: 350,
},
button: {
fontSize: '12px',
margin: theme.spacing.unit,
minWidth: 350
},
extendedIcon: {
marginRight: theme.spacing.unit,
}
});
class MainPage extends React.Component {
constructor() {
super();
}
render() {
const {
classes
} = this.props;
return ( <
React.Fragment >
<
CssBaseline / >
<
Grid container spacing = {
0
}
direction = "column"
alignItems = "center"
justify = "center"
style = {
{
minHeight: '100vh'
}
} >
<
form onSubmit = {
this.handleSubmit
} >
<
Card className = {
classes.card
} >
<
CardContent >
<
Grid item xs = {
3
} >
<
Button variant = "contained"
size = "medium"
color = "primary"
className = {
classes.button
}
type = "submit"
value = "single" >
ButtonA <
/Button> <
/Grid> <
Grid item xs = {
3
} >
<
Button variant = "contained"
size = "medium"
color = "primary"
className = {
classes.button
}
type = "submit"
value = "batch" >
ButtonB <
/Button> <
/Grid> <
/CardContent> <
/Card> <
/form> <
/Grid> <
/React.Fragment>
);
}
}
export default withStyles(styles)(MainPage);
我想在单击按钮时加载一个新组件(CompA
或者CompB
,取决于单击了哪个按钮 - ButtonA 或 ButtonB)。一个新组件应该完全替换一个当前组件——我的意思是它应该加载到整个屏幕中(而不是按钮旁边的任何地方)。
我该怎么做?
更新:
我想替换 MainPage 组件,而不仅仅是在它上面渲染。
这就是我加载的方式MainPage
:
index.js
import React from 'react';
import { render } from 'react-dom';
import MainPage from './components/MainPage';
const View = () => (
<div>
<MainPage/>
</div>
);
render(<View />, document.getElementById('root'));
解决方案
您可以创建一个不同的组件来处理状态,并在该组件中添加一个 if 语句来处理您要呈现的视图。
您可以在此处查看示例codesandbox.io/embed/6wx2rzjrr3
应用程序.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
import View1 from "./View1";
import View2 from "./View2";
import "./styles.css";
class App extends Component {
state = {
renderView: 0
};
clickBtn = e => {
this.setState({
renderView: +e.target.value
});
};
render() {
switch (this.state.renderView) {
case 1:
return <View1 />;
case 2:
return <View2 />;
default:
return <Main clickBtn={this.clickBtn} />;
}
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
主.js
import React from "react";
export default props => (
<>
Main view{" "}
<button value={1} onClick={props.clickBtn}>
View 1
</button>{" "}
<button value={2} onClick={props.clickBtn}>
View 2
</button>{" "}
</>
);
View1.js
import React from "react";
export default props => "View 1";
View2.js
import React from "react";
export default props => "View 2";
推荐阅读
- c# - Identity Server 4 向用户添加自定义声明
- xml - 在 Snowflake 中解析嵌套的 XML
- python - Matplotlib 标签更改灰色阴影
- angular - ngrx 中的 StoreModule.forRoot 引发角度错误
- vba - VBA 宏报告 PowerPoint 幻灯片上的链接
- sql - 如何使用 XMLQuery 更新 clob Oracle 中的 XML 属性
- flutter - 无法在点击按钮时关闭 Flushbar(Flushbar 是 Flutter 的一个包)
- python - 将带有重复标签的 XML 转换为 JSON
- python - 读取txt文件时将带空格的名称(国家名称)视为多列
- java - 如何中断计时器直到代码执行完毕