반응 구성 요소에 styleName을 토글 및 추가하는 방법

Question

@shoutem/ui 및 반응 고유의 지수 프레임 워크를 사용하여 반응하는 기본 응용 프로그램을 만듭니다. 간단하게 처리하고 싶습니다. styleName을 선택하지 않으면 토글 버튼에 '음소거'된 styleName을 추가하십시오. 이 경우에는 로그인 및 등록이라는 두 개의 버튼이 있으며 하나를 시도하는지 다른 하나를 시도하는지에 따라 하나는 음소거됩니다.

구문에 문제가있어서 jsx에서 인라인 조건을 수행하려고합니다. 내가 본 몇 가지 예제는 클래스 객체를 동적으로 추가하지만, shoutem/ui를 사용하고 있기 때문에 className이 객체이지만 문자열이 아닌 것은 확실하지 않습니다. styleName 문자열을 추가할지 여부를 확인하기 위해 인라인 조건부를 수행하는 것을 고려하고 있었지만 올바르지 않은 것 같습니다.

import React, { Component } from 'react'; 

import { 
    Image, 
    Title, 
    Text, 
    View, 
    Button, 
    TextInput, 
    Screen, 
} from '@shoutem/ui'; 

export default class LoginScreen extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     isRegistering: false, 
    } 
    } 

    toggleRegister(registering) { 
    this.setState({isRegistering:registering}); 
    } 

    render() { 
    return (
     <Screen styleName="vertical collapsed paper"> 
     <View styleName="md-gutter"> 
      <View styleName="horizontal"> 
      <Button styleName="full-width {this.state.isRegistering ? 'muted' || ''}" onPress={()=>this.toggleRegister(false)}> 
       <Text>LOGIN</Text> 
      </Button> 
      <Button styleName="full-width {this.state.isRegistering ? '' || 'muted'}" onPress={()=>this.toggleRegister(true)}> 
       <Text>Register</Text> 
      </Button> 
      </View> 
      <TextInput 
      placeholder="Username or Email" 
      /> 
      <TextInput 
      placeholder="Password" 
      secureTextEntry 
      /> 
      <Button styleName="dark"> 
      <Text>Submit</Text> 
      </Button> 
     </View> 
     </Screen> 


    ); 
    } 
} 

Answer 1

내가 ShoutemUI와 개인적으로 익숙하지 해요,하지만 introduction에서이 styleName처럼 나에게 소리는 단순히 style와 혼동하지 않고 객체보다, 문자열입니다 className에 대한 대체 이름 (이다). 나는 또한 classnames 폴더의 유틸리티보고 제안

<Button styleName={'full-width' + (this.state.isRegistering ? ' muted' : '')} /> 

다음과 같이

어쨌든, 당신은 표현식에서 여러 스타일을 결합 할 수 있습니다.