헬퍼 함수인 getStyle()은 top, bottom, left, right 같은 CSS 스타일의 반복을 추상화하여 창 너비에 따라 다른 값을 반환한다. 이런 이유로 getStyle()은 값과 승수 m을 전달받아 픽셀을 반환한다(React에서는 CSS에 숫자를 사용하면 픽셀로 바뀐다).
그 외의 코드는 간단하다. 상태와 속성을 이용하여 네 개의 <div/> 엘리먼트를 렌더링하는 render() 메서드를 구현하면 된다. constructor()에서 각각 특별한 스타일을 선언하고 있다.
예제 코드 6.12 상태 값을 스타일에 이용해서 엘리먼트 크기 변경하기
... render() { return <div> <div className="radio-tagger" style={this.state.taggerStyle}> <input type="radio" name={this.props.name} id={this.props.id} /> <label htmlFor={this.props.id}> <div className="radio-text" style={this.state.textStyle}> {this.props.label}</div> <div className="radio-outer" style={this.state.outerStyle}> <div className="radio-inner" style={this.state.innerStyle}> <div className="radio-selected" style={this.state.selectedStyle} /> </div> </div> </label> </div> </div> } }