変数名に応じて奇妙な内部問題に反応してください。

Question

変数に付けた名前に応じて、反応に問題があります。

私は、生成されたコードを確認するためにeval sourcemapを使用しています、と私は2つのファイルを持っている

理解することはできませんよ何かがあります。そのうちの1つでは、HOCをエクスポートして、別のファイルにインポートします。

私はそのHOCをエクスポートするのと同じファイルで、私はそれを使用しようとします。これは私が問題を抱えているファイルです。重要な行はショーをtranspiled

File A: (DmDefEntity is my HOC)

class DmClass extends Component { 
    ... 
    ... 
    methodA() { 
    ... 
    return <_internalDmClass def={entry.def} lbls={this.props.lbls[key]} path={key} name={key} />; 
    } 

    render() { 
    ... 
    } 
} 

const _internalDmClass = DmDefEntity(DmClass); 
export default _internalDmClass; 

：

Transpile with underscore in variable

... 
    ... 
    return _react3.default.createElement(_internalDmClass, { def: entry.def, lbls: this.props.lbls[key], path: key, name: key }); 
    ... 
    ... 

var _internalDmClass = (0, _DmDefEntity2.default)(DmClass); 
exports.default = _internalDmClass; 

すべてはここよさそうだ、それが実際に完璧に動作します。

しかし

私は（無アンダースコア） "internalDmClass" には、この変数の名前を変更する場合。私transpiledファイルは次のようになります。

Transpile with no underscore in variable

... 
    ... 
    return _react3.default.createElement('internalDmClass', { def: entry.def, lbls: this.props.lbls[key], path: key, name: key }); 
    ... 
    ... 

var internalDmClass = (0, _DmDefEntity2.default)(DmClass); 
exports.default = internalDmClass; 

のであなたが見ることができるように、そのアンダースコアに応じて、それはなど

、そのdefaulプロパティで、文字列、または実際HOCクラスでのcreateElementの呼び出し

実行時間のこの効果は、次のエラーである：時間溶液として

Warning: Unknown props def , lbls , path on tag. Remove these props from the element. For details, see https://facebook.github.io/react/warnings/unknown-prop.html

Answer 1

Reactでは、小文字で始まるコンポーネントはすべてHTML要素として解釈されます。これを修正するには、InternalDmClassに名前を変更します。

All lower case JSX tags will now be treated as HTML/SVG elements. They will no longer be treated as custom components in scope.

Source

Answer 2

（I yを理解することができていませんらは、変数の名前は、私が代わりにJSXソリューションを使用しての、React.createElement機能を使用している）、このようにどのように影響するか：

が翻訳した

return <internalDmClass def={entry.def} lbls={this.props.lbls[key]} path={key} name={key} />; 

へ：

return React.createElement(internalDmClass, { def: entry.def, lbls: this.props.lbls[key], path: key, name: key }); 

この関数を直接呼び出すと、Reactはコードを翻訳する必要がないようです。それは正しく蒸留された。

私はまだこの問題を理解したいと思います。