JSBinでReactJSフレームワークをいじっています。
コンポーネント名が小文字で始まっていると機能しないことに気づきました。
たとえば、以下はレンダリングされません。
var fml = React.createClass({
render: function () {
return <a href='google.com'>Go</a>
}
});
React.render(<fml />, document.body);しかし、すぐに私が代わるようfmlでFml、それはレンダリングありません。
タグを小文字で始めることができない理由はありますか？
回答:
JSXでは、小文字のタグ名はHTMLタグと見なされます。ただし、ドットを含む小文字のタグ名（プロパティアクセサー）はそうではありません。
HTMLタグとReactコンポーネントを参照してください。
<component />コンパイルしてReact.createElement('component')（htmlタグ）<Component /> コンパイルする React.createElement(Component)<obj.component /> コンパイルする React.createElement(obj.component)let component = components[compType]; <component/>、ナンセンスなエラーが出ていました。
<components[name] />どちらもうまくいかないことを試しました。
Components代わりに呼び出すとcomponents、彼らの素敵なサイトはエラーなしでロードされますが、コンテンツはありません！
@Alexandre Kirszenbergは非常に良い答えを出しました、もう1つの詳細を追加したかっただけです。
Reactには、divDOM要素とReactコンポーネントを区別するために使用されている、よく知られた要素名などのホワイトリストが含まれていました。
しかし、そのリストを維持することはそれほど楽しいことではなく、Webコンポーネントによってカスタム要素を作成できるため、すべてのReactコンポーネントは大文字で始めるか、ドットを含める必要があるという規則になりました。
要素タイプが小文字で始まる場合、それはまたはなどの組み込みコンポーネントを参照し、React.createElementに渡される文字列「div」または「span」になります。React.createElement（Foo）にコンパイルするような大文字で始まるタイプは、JavaScriptファイルで定義またはインポートされたコンポーネントに対応します。
また、次のことに注意してください。
コンポーネントには大文字で名前を付けることをお勧めします。小文字で始まるコンポーネントがある場合は、JSXで使用する前に大文字の変数に割り当てます。
つまり、以下を使用する必要があります。
const Foo = foo;fooJSXでコンポーネント要素として使用する前。
JSXタグの最初の部分は、React要素のタイプを決定します。基本的に、大文字で表記された小文字のドット表記法があります。
大文字とドット表記のタイプは、JSXタグがReactコンポーネントを参照していることを示します。したがって、JSX <Foo />コンパイルを使用する場合は、JavaScriptファイルで定義またはインポートされたコンポーネントにコンパイルReact.createElement(Foo)
またはOR
<foo.bar />コンパイルしReact.createElement(foo.bar)て対応します。
ながら、小文字のタイプのような部品内蔵に指示<div>又は<span>文字列で結果'div'または'span'渡さReact.createElement('div')。
Reactは大文字でコンポーネントに名前を付けることを推奨しています。小文字で始まるコンポーネントがある場合は、で使用する前に大文字の変数に割り当てますJSX。