J'utilise react16 avec des composants Material-Ui. Sur mon ordinateur racine. Je souhaite charger un onglet et une vue conditionnellement sur une propriété. J'ai réussi à faire cette fonctionnalité. Mais le code a l'air vraiment moche et peut-être que cela peut être simplifié. La condition dépend de this.props.isSIInstalled

Composante:

  render() {
    const {shouldSwipe} = this.props;

    return (
      <MuiThemeProvider theme={theme}>
          <Tabs className=' electric' value={this.state.value}
                onChange={this.handleChange.bind(this)} variant="scrollable" id={'tabMenu'}>

            <Tab label={1} value={0}/>
            <Tab label={2} value={1}/>
            <Tab label={3} value={2}/>
            {this.props.isSIInstalled
            && <Tab label={4} value={3}/>}
          </Tabs>
          {
            this.props.isSIInstalled ?
          <SwipeableViews index={this.state.value} onChangeIndex={this.handleChange.bind(this)} disabled={!shouldSwipe}>

              <div>Item One</div>
              <div>Item Two</div>
              <div>Item Three</div>
              <div>Item Four</div>

          </SwipeableViews> :
              <SwipeableViews index={this.state.value} onChangeIndex={this.handleChange.bind(this)} disabled={!shouldSwipe}>

              <div>Item One</div>
              <div>Item Two</div>
              <div>Item Three</div>

              </SwipeableViews>
            }
      </MuiThemeProvider>
    )
  }
0
Fantasia 15 mars 2019 à 12:53

2 réponses

Meilleure réponse

Dans l'ensemble, ce que j'ai fait, c'est d'utiliser la fonction map qui est une bouée de sauvetage sur React et a déplacé certaines chaînes vers un autre fichier, rend le code plus net et plus lisible.

  return (
    <MuiThemeProvider theme={theme}>
      <div className="noScroll">
        <Tabs className='byod-no-pinch-zoom electric' value={this.state.value}
          onChange={this.handleChange.bind(this)} variant="scrollable" id={'tabMenu'}>

          TAB_INFO.map(x => <Tab label={x.label} id={x.id} />)
          {this.props.isSIInstalled
            && <Tab label={getSID('SID_RHMI_BYOD_SOURCE_EXPERIENCES')} value={3} />}
        </Tabs>
        {
          this.props.isSIInstalled ?
            <SwipeableViews index={this.state.value} onChangeIndex={this.handleChange.bind(this)} disabled={!shouldSwipe}>
              <div className="modal-container byod-no-pinch-zoom">
                <JourneyInfo webSocketClient={this.props.webSocketClient} />
              </div>

              ['Item Two','Item Three','Item Four'].map( x=>
                <div className="modal-container byod-no-pinch-zoom">
                <div>{x}</div>
              </div>
              )
            </SwipeableViews> :
            <SwipeableViews index={this.state.value} onChangeIndex={this.handleChange.bind(this)} disabled={!shouldSwipe}>
              <div className="modal-container byod-no-pinch-zoom">
                <JourneyInfo webSocketClient={this.props.webSocketClient} />
              </div>
              <div className="modal-container byod-no-pinch-zoom" />
              <div className="modal-container byod-no-pinch-zoom" />
            </SwipeableViews>
        }
      </div>
    </MuiThemeProvider>
  )
}

Un autre fichier, généralement appelé strings.js ou constantes.

const export TAB_INFO = [
  {
    label: 'SID_RHMI_BYOD_INFO',
    value: 0,
  },
  {
    label: 'SID_RHMI_BYOD_MEDIA',
    value: 1,
  },
  {
    label: 'SID_RHMI_BYOD_CLIMATE',
    value: 2,
  },
]
0
S.Haviv 15 mars 2019 à 10:04

Comme je peux le voir, vos composants conditionnels sont presque les mêmes, et la seule différence est que vous affichez/masquez ItemFour dépend de this.props.isSIInstalled. Vous pouvez donc simplifier le code comme suit :

 ...
 </Tabs>
<SwipeableViews index={this.state.value} onChangeIndex={this.handleChange.bind(this)} disabled={!shouldSwipe}>
            <div className="modal-container byod-no-pinch-zoom">
              <div>Item One</div>
            </div>
            <div className="modal-container byod-no-pinch-zoom">
              <div>Item Two</div>
            </div>
            <div className="modal-container byod-no-pinch-zoom">
              <div>Item Three</div>
            </div>
            {
                  this.props.isSIInstalled && (
                       <div className="modal-container byod-no-pinch-zoom">
                          <div>Item Four</div>
                       </div>
                  )
            }
          </SwipeableViews>

De plus, si vous souhaitez rendre des vues absolument différentes en fonction des conditions, vous pouvez procéder comme suit :

</Tabs>
{
     this.props.isSIInstalled && View1
}
{
    !this.props.isSIInstalled && View2
}
0
IfSoGirl 15 mars 2019 à 10:01