JSX 'partials'のようなものはありますか？

Question

私は主にHandlebars JSで作業しますが、私はJSXを検討しています。 Handlebars partialsに相当するJSXはありますか？いくつかの異なるJSXビューで再利用できるマークアップの小さなビットを作成できるかどうかを知りたい。

Answer 1

これは部分文字列を提供しません。いくつかのことについてリアクト：

• リアクションはパーシャルの概念を提供しません。 Reactの基本的な原子単位はコンポーネントです。
• パーシャルを渡す代わりに、コンポーネントを作成して再利用します。関数なので部分的なものよりも優れているので、カプセル化されているのでとがテスト可能です！
• マークアップが小さい場合、それはおそらくどちらかの親コンポーネントにまで移動する必要がありますまたは下にシンプルな1

に一般的に、親指の私のルールは、コンポーネントは単一責任または分離の原則に従うべきであるということです懸念事項の何かがコンポーネントに収まるように思われない場合は、他の二つの成分に問題がありそうなんだし、それらを見直すことができ、あまりにも:)

コンポーネントを考えるときで行くには、親指の別のカップルの規則：

• コードの臭いは、通常、コンポーネント（何度も何度も何度も繰り返すなど）になります。
• コンポーネントは通常、プレゼンテーションまたはコンテナ化されています。後者は、アプリケーションのための小道具/状態ツリーの役割を持っています（あなたは決してそれらを見ません）。
• 必要に応じてコンポーネントをリファクタリングします。あなたが時期尚早にリファクタリングし、あなた自身のためにより多くの問題を作り出しているかもしれないので、すべてをカプセル化することを開始しないでください。
• 最も再利用可能でデカップリングされたコンポーネントはクリーンでフレキシブルでテスト可能であり、

• 同時に、狂ってはならず、すべてをコンポーネントに入れてください。すなわち、あなたは（通常は）望んでいない：、しかし

  OuterComponent 
  Am I reusable? Yeah! 
  

  注意を、使用していること：

  'use strict'; 
  
  const OuterComponent = React.createClass({ 
      render() { 
      return (
       <div>Outer{this.props.children}</div> 
      ); 
      } 
  }); 
  
  const ReusableComponent = React.createClass({ 
      render() { 
      return (
       <div>Am I reusable? {this.props.reusable && 'Yeah!' }</div> 
      ); 
      } 
  }); 
  
  ReactDOM.render(
      <OuterComponent> 
      <ReusableComponent reusable={true}/> 
      </OuterComponent>, 
      document.getElementById('container') 
  ); 
  

  がレンダリングされます：

  <Letter>R</Letter><Letter>e</Letter><Letter>a</Letter><Letter>c</Letter><Letter>t</Letter>ここ

は信じられないほど簡単な例ですcreatClassは、変更可能なstで作業していない場合に必要となる以上のものを提供します（this.state経由でコンポーネント内に提供されています）、「ステートレス機能コンポーネント」と呼ばれることもあります（ステートレスで、関数から返されるため）。これらはJSXを暗黙的に返す矢印関数（これは本質的にちょうどReact.createElement()ジェネレータ）です

const OuterComponent = (props) => <div>Outer{this.props.children}</div>; 

const ReusableComponent = (props) => <div>Am I reusable? {this.props.reusable && 'Yeah!' }</div>; 

ReactDOM.render(
    <OuterComponent> 
    <ReusableComponent reusable={true}/> 
    </OuterComponent>, 
    document.getElementById('container') 
); 

Answer 2

componentを作成してください。コンポーネントは、必要なだけシンプルにまたは複雑にすることができます。

例：対応.badge CSSクラスに

function Badge(props) { 
    return <span className="badge">{props.counter}</span> 
} 

、これは数赤い円としてレンダリングし、<Badge counter={42} />として使用される非常に単純コンポーネントとすることができます。