Reactjs継承

Question

私はReactにはとても新しく、HTMLコントロールをレンダリングする簡単なアプリケーションを作ろうとしています。

私はJSONオブジェクトの配列は、タイプとID、タイプ、値などの各コントロールの値を決定するプロパティが含まれている返すAPIを持つようにしたい...などが

のは、私はいくつかのコントロールを持っているとしましょう入力とボタンのようなものです。

React.Componentと他のhtmlコントロールを拡張するHtmlControlという名前の基本クラスを作成すると、HtmlControlと最後にこれらのコントロールをレンダリングするクラスが拡張されます。

HtmlControlクラスのみを拡張するコントロールをレンダリングするにはどうすればよいですか？

Answer 1

リアクションが封じ込めや構成に焦点を当てるのではなく、継承に重点を置くべきではないと言っているので、それは良い選択ではありません。

リアクションは強力なコンポジションモデルを持ち、継承の代わりにコンポジションを使用してコンポーネント間でコードを再利用することをおすすめします。

やFacebookで

は、我々は、使用するコンポーネントの数千人に反応し、我々はコンポーネントの継承階層を作成することをお勧めしますすべてのユースケースを発見していません。

小道具と構成は、明示的かつ安全な方法でコンポーネントの外観と動作をカスタマイズするために必要なすべての柔軟性を提供します。コンポーネントは、プリミティブ値、リアクション要素、関数などの任意の小道具を受け入れることができます。

詳細については、Visit this linkをご覧ください。

あなたは部品や要素ごとに別々のクラスを作成し、このように一つのクラスでそれらを組み合わせることができます：

import Button from './Button' 
import Radio from './Radio' 
import TextInput from './TextInput' 

class HtmlComponent{ 
// note: we don't need to extend it from React.Component 
// we will some function to render them. 

renderTextInput() { <TextInput /> } 
renderRadio() { <Radio /> } 
} 

// you can now use below code: 
const hC = new HtmlComponent(); 
hC.renderTextInput(); 

注再びこれを行うための良いアイデアではありませんが、あなたはあなたの目標を達成することができます。