通过多个条件显示对应的Html

柔光的暖阳◎ 2022-12-16 06:23 196阅读 0赞

方法一：代码

import React, { Component } from "react";
    import { Radio, Input } from "antd";
    const radioStyle = {
      display: "block",
      height: "30px",
      lineHeight: "30px",
      color: "black",
      marginLeft: 10
    };
    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          hubContract:""
        };
      }
       renderNone = (value)=> {
        switch (value) {
          case '4G':
            return <>
              <Radio style={radioStyle} value={"4G"}>Siren 4G Hub</Radio>
              <Radio style={radioStyle} value={"null"}>None</Radio>
            </>
          case 'Wifi':
            return <>
              <Radio style={radioStyle} value={"Wifi"}>Siren WiFi Hub</Radio>
              <Radio style={radioStyle} value={"null"}>None</Radio>
            </>
          case '4G/Wifi':
            return <>
              <Radio style={radioStyle} value={"4G"}>Siren 4G Hub</Radio>
              <Radio style={radioStyle} value={"Wifi"}>Siren WiFi Hub</Radio>
              <Radio style={radioStyle} value={"null"}>None</Radio>
            </>
          default:
            return null;
        }
    }
      render() {
        return (
            <Radio.Group
                onChange={this.onChange}
                value={this.props.sockHubType}
            >
                {this.renderNone(this.state.hubContract)}
              </Radio.Group>
        );
      }
    }
    export default App;

方法二：代码

import React, { Component } from "react";
    import { Radio, Input } from "antd";
    const radioStyle = {
      display: "block",
      height: "30px",
      lineHeight: "30px",
      color: "black",
      marginLeft: 10
    };
    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          hubContract:""
        };
      }
      baesRadio = (elements=[])=>{
        return elements.map(item=>{
        return  <Radio style={radioStyle} value={item}>item</Radio>
        })
      }
       renderNone = (value)=> {
        const arr = ['null']
        switch (value) {
          case '4G':
            arr.push('4G')
            return <>
              {this.baesRadio(arr)}
            </>
          case 'Wifi':
            arr.push('Wifi')
            return <>
              {this.baesRadio(arr)}
            </>
          case '4G/Wifi':
            arr.push('4G')
            arr.push('Wifi')
            return <>
              {this.baesRadio(arr)}
            </>
          default:
            return null;
        }
    }
      render() {
        return (
            <Radio.Group
                onChange={this.onChange}
                value={this.props.sockHubType}
            >
                {this.renderNone(this.state.hubContract)}
              </Radio.Group>
        );
      }
    }
    export default App;

方法三：代码（提取出共同都有的Html代码）

import React, { Component } from "react";
    import { Radio, Input } from "antd";
    const radioStyle = {
      display: "block",
      height: "30px",
      lineHeight: "30px",
      color: "black",
      marginLeft: 10
    };
    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          hubContract:""
        };
      }
      baesRadio = ()=>{
        return <>
        <Radio style={radioStyle} value={"null"}>None</Radio>
        {element}
        </>
      }
       renderNone = (value)=> {
        const arr = ['null']
        switch (value) {
          case '4G':
            arr.push('4G')
            return
              {baesRadio(<Radio style={radioStyle} value={"4G"}>Siren 4G Hub</Radio>)}
          case 'Wifi':
            arr.push('Wifi')
            return
              {baesRadio(<Radio style={radioStyle} value={"Wifi"}>Siren WiFi Hub</Radio>)}
          case '4G/Wifi':
            arr.push('4G')
            arr.push('Wifi')
            return
              {baesRadio(<><Radio style={radioStyle} value={"4G"}>Siren 4G Hub</Radio><Radio style={radioStyle} value={"Wifi"}>Siren WiFi Hub</Radio></>)}
          default:
            return null;
        }
    }
      render() {
        return (
            <Radio.Group
                onChange={this.onChange}
                value={this.props.sockHubType}
            >
                {this.renderNone(this.state.hubContract)}
              </Radio.Group>
        );
      }
    }
    export default App;