React-Native : 하위 구성 요소의 조건부 스타일링

Question

숫자가 1, 2, 3 인 배열이 있습니다. 각 숫자에 대해 Square 요소를 렌더링하기 위해 매핑하려고합니다. 이것은 잘 동작했다. 이제 값 (1, 2 또는 3)에 따라 Square 요소의 스타일을 조건부로 지정하고 싶습니다. 그 이유를 알 수없는 'switch'(예기치 않은 토큰)와 함께 줄에 구문 오류가 있습니다.

class MainMaze extends Component { 

    generateMaze() { 
    const { tiles, cols, rows } = this.props.grid; 
    return (
     tiles.map((sq, i) => 
     switch (sq) { 
      case 3: 
      return <Square style={{ backgroundColor: 'red' }}>{sq}</Square>; 
      case 2: 
      return <Square style={{ backgroundColor: 'blue' }}>{sq}</Square>; 
      default: 
      return <Square style={{ backgroundColor: 'green' }}>{sq}</Square>; 
     } 
    ); 
    } 
    render() { 
    const { grid, position, status } = this.props; 

    return (
     <View> 
     <CardSection> 
      <Text>{grid.cols}</Text> 
     </CardSection> 
     <CardSection> 
      {this.generateMaze()} 
     </CardSection> 
     </View> 
    ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    status: state.status, 
    position: state.position, 
    grid: state.grid 
    }; 
}; 

export default connect(mapStateToProps)(MainMaze); 

광장 요소 : 여기

import React from 'react'; 
import { View, Text } from 'react-native'; 

const Square = (props) => { 
    return (
    <View style={[styles.containerStyle, props.style]}> 
     <Text> 
     {props.children} 
     </Text> 
    </View> 
); 
}; 

const styles = { 
    containerStyle: { 
    borderWidth: 1, 
    borderColor: '#ddd', 
    elevation: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    margin: 0, 
    height: 30, 
    width: 30 
    } 
}; 

export { Square }; 

Answer 1

이 (mozilla docs에서 촬영) 여러 개의 문을 가진 화살표 표현 기능의 올바른 구문입니다

(param1, param2, …, paramN) => { statements } 즉, 당신은 switch을 포장한다 블록 : {...} :

generateMaze() { const { tiles, cols, rows } = this.props.grid; return ( tiles.map((sq, i) => { switch (sq) { case 3: return <Square style={{ backgroundColor: 'red' }}>{sq}</Square>; case 2: return <Square style={{ backgroundColor: 'blue' }}>{sq}</Square>; default: return <Square style={{ backgroundColor: 'green' }}>{sq}</Square>; } } )) }