ReactJS - コンポーネント - ベストプラクティス

Question

私は反応が比較的新しいので、入力フィールド用の文字カウンタコンポーネント（CharacterCounter）を作成する必要があります。

この質問は、このコンポーネント（文字カウンタ）に特異的なものではない - しかし、一般的にはコンポーネントのベストプラクティスに関する一般的な質問です。

私は二つの方法（私の知る限り知っている - より良い方法がある場合、私はそれを聞いてうれしいです）で実装することができます：コンポーネントをラッピング

1）と子として入力フィールドを持っています - I C：成分は、入力フィールドの後（カウンタを示す）

<CharacterCounter maxLength={50}> 
    <input type="text"> 
    </CharacterCounter> 

と

const input = this.container.firstChild 
input.addEventListener('keyup', function() { ... }); 

• 利点をスパンを挿入します同じ入力に複数のコンポーネントがある場合 - この入力用に追加の機能（コンポーネント）が必要な場合
• 欠点：何らかの理由での入力は、このコンポーネントの最初の子であることを停止した場合 - 作業を停止/もろい

2）入力と（レンダリングのカウンタをレンダリングします汎用コンポーネントを作成します）機能

のような：

<CharacterCounter /> 

render() { 
    return (
     <input type="text"> 
     <span>{this.state.count}</span> 
    ) 

• 利点：壊れやすいなし - 最初の子に頼らない
• 欠点：わからない同じ入力のための他のコンポーネントを持つことが可能である - /またはフィールド

のベストプラクティスは何ですかをぼかすのは、私は毎回ユーザータイプ/またはフォーカスを追跡するための別のコンポーネントを必要としましょうか？

Answer 1

もちろん、DOM要素を直接干渉しないため、2番目の方法が優れています。

DOM要素にアクセスしたい場合は、refsを使用することをお勧めします。

欠点：わからない 同じ入力のための他のコンポーネントを持つことが可能である - のは、私は、ユーザーの種類/または焦点ごと 時間を追跡するための別のコンポーネントを必要と/またはフィールドをぼかしましょう

propsで簡単に回避できます。

Answer 2

stateを持つコンポーネントで2番目のアプローチを使用して、そのコンポーネントを拡張したり、そのコンポーネントのより多くの "特殊なケース"を作成するためにcompositionを使用することができます。

let {Component} = React; 
 

 
class Input extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = {count: 0} 
 
    } 
 
    
 
    render() { 
 
    return <div> 
 
     <input 
 
     {...this.props} 
 
     onChange={() => { 
 
     let count = this.refs.inputCount.value.length; 
 
     this.setState({count}) 
 
     }} 
 
     type="text" 
 
     maxLength="50" 
 
     ref="inputCount" /> 
 
     <span> {this.state.count}/50</span> 
 
    </div> 
 
    } 
 
} 
 

 
class FocusInput extends Component { 
 
    render() { 
 
    return <Input 
 
    onFocus={() => { 
 
     console.log('Focus') 
 
    }} /> 
 
    } 
 
} 
 

 
class App extends Component { 
 
    render() { 
 
    return <div> 
 
     <Input /> 
 
     <FocusInput /> 
 
    </div> 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('app') 
 
);

<script src="https://unpkg.com/react@16.1.0/umd/react.development.js"></script> 
 
<script src="https://unpkg.com/react-dom@16.1.0/umd/react-dom.development.js"></script> 
 
<div id="app"></div>