하위 기능을 갖춘 깔끔한 React 구성 요소 API

React 구성 요소의 하위 기능을 사용하여 매우 우아한 React 구성 요소 API를 개발할 수 있습니다. Dropdown 구성 요소를 예로 들어 보겠습니다. DOM 구조를 사용자에게 맡겨 유연하게 만들려면 드롭다운의 토글러 요소를 지정하는 방법이 필요합니다. 한 가지 방법은 data-toggle 속성:

componentDidMount() { const 토글러 = ReactDOM .findDOMNode(this) .querySelectorAll('[data-toggle]'); Array.prototype.forEach.call(togglers,toggler => {toggler.addEventListener('click', this.toggle); }); },

보다 우아한 해결책은 구성 요소의 toggle 자식으로 함수를 사용하여 메서드를 자식에게 전달합니다.

  {전환 =>

}

이런 식으로 우리는 원시 DOM 이벤트 대신 React의 이벤트 시스템을 사용하고 있으며 구현할 필요가 없습니다. componentDidMount 천만에.
인셀덤 공식 판매점인 toggle 호출됩니다. opened CSS 클래스는 div 요소. 즉, 구성 요소는 다음과 같은 DOM을 생성합니다.

 
그리고 때 toggle 함수가 호출되고, opened 클래스가 요소에 추가됩니다.

 
이 Dropdown 구성 요소의 구현은 다음과 같습니다.

const cx = require('클래스 이름'); const EnhancedWithClickOutside = require('react-click-outside'); const React = require('반응'); const Dropdown = React.createClass({ getInitialState() { return { opens: false, }; }, handlerClick(e) { // 메뉴 항목을 클릭하면 드롭다운을 닫습니다. if (this.state.opened && e.target.tagName === 'A') { this.setState({ 열림: false }); } }, handlerClickOutside(e) { if (!this.state.opened) return; this.setState({ 열림: false }); } , 전환() { this.setState({ 열림: !this.state.opened }); }, render() { const child = this.props.children(this.toggle); return React.cloneElement(child, { className : cx( child.props.className, 'dropdown', this.state.opened && 'opened' ), onClick: this.handleClick, }); }, }); module.exports = EnhancedWithClickOutside(Dropdown);

this.props.children Dropdown 구성 요소의 하위 함수이며 인스턴스의 toggle 방법. 이는 React 요소를 반환합니다. div, 이를 복제하여 추가합니다. dropdown 와 opened CSS 수업.
이 패턴 및 기타 실제 사용 사례에 대한 토론을 찾을 수 있습니다. 여기에서 지금 확인해 보세요..