代码之家 › 专栏 › 技术社区 › ScalaBoy

如何在ReactJS中的按钮click上加载新组件?

material-ui reactjs javascript

ScalaBoy · 技术社区 · 6 年前

我在 ReactJs 打电话 MainPage (使用材质用户界面)。

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 ,取决于单击的按钮-按钮a或按钮b)单击按钮。一个新的组件应该完全替换一个当前的组件-我的意思是它应该被加载到整个屏幕中(不在按钮旁边的任何地方)。

我该怎么做?

更新:

我想替换主页组件,而不仅仅是在上面渲染。

我就是这样装的 主页 :

索引文件

import React from 'react';
import { render } from 'react-dom';
import MainPage from './components/MainPage';

const View = () => (
  <div>
    <MainPage/>
  </div>
);

render(<View />, document.getElementById('root'));

2 回复 | 直到 6 年前

Meir Keller 6 年前

可以创建其他组件来处理状态,并在该组件中添加if语句来处理要呈现的视图。

你可以在这里看到这个例子 codesandbox.io/embed/6wx2rzjrr3

App.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);

MIN 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";

VIEW 2.JS

import React from "react";

export default props => "View 2";

Hamed 6 年前

在index.js中,可以使用

const View = () => (
  <div>
    <MainPage condition='something' />
  </div>
);

然后在您的主页上:

class MainPage extends React.Component {
   constructor() {
      super();
   }

  myCondition1() {
    return (
        <Component1 />
    );
 }


  myCondition2() {
    return (
        <Component2 />
    );
 }

  render() {
     const { condition} = this.props;
     return (
         {condition === 'something' ? this.myCondition1() : this.myCondition2()}
     )
  }
}

更新

下面是一个简单按钮的例子:

class Condition1 extends React.Component {
  render() {
    return (
        <div>Condition 1</div>
    );
  }
}

class Condition2 extends React.Component {
  render() {
    return (
        <div>Condition 2</div>
    );
  }
}

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          condition: true
        };
        this.handleClick = this.handleClick.bind(this);
    }
    
    handleClick(condition) {
      this.setState( {condition} )
    }

  render() {
     const { condition } = this.state;
     return (
         <div>
             <button onClick={() => this.handleClick(true)}>Condition1</button>
             <button onClick={() => this.handleClick(false)}>Condition2</button>
             {condition === true ? <Condition1 /> : <Condition2 />}
         </div>
     )
  }
}

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

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script><div id="root" />