関数を子として持つエレガントな React コンポーネント API
React コンポーネントの子として関数を使用して、非常にエレガントな React コンポーネント API を開発できます。 たとえば、ドロップダウン コンポーネントを考えてみましょう。 DOM 構造をユーザーに任せて柔軟にしたい場合は、ドロップダウンのトグラー要素を指定する何らかの方法が必要になります。 XNUMX つの方法は、 data-toggle
属性:
ComponentDidMount() { const togglers = 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 extendWithClickOutside = require('react-click-outside'); const React = require('react'); const Dropdown = React.createClass({ getInitialState() { return {opened: false, }; }, handleClick(e) { // メニュー項目をクリックするとドロップダウンを閉じる if (this.state.opened && e.target.tagName === 'A') { this.setState({ 開かれた: false }); } }, handleClickOutside(e) { if (!this.state.opened) return; this.setState({ 開かれた: false }); } , toggle() { this.setState({ opens: !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 = extendWithClickOutside(ドロップダウン);
this.props.children
これは Dropdown コンポーネントの子関数であり、インスタンスの toggle
方法。 これは React 要素を返します。 div
をクローンして追加します。 dropdown
や opened
CSSクラス。
このパターンと他の実際の使用例についての説明が見つかります。 ここから.