2016-08-12 8 views
10

react-emptyreact-emptyとは何ですか?*?

<div data-reactroot> 
<!-- react-empty: 3 --> 
<!-- react-empty: 26 --> 
</div> 

このノードは何ですか?それはなぜ反応コンポーネントにレンダリングできますか?このようにするには?

答えて

8

これは実際React's internal support for things like nullの一部です:だから、基本的にはコンポーネントのリターン場合はnull、それはコメントを作成します

var nodeValue = ' react-empty: ' + this._domID + ' '; 
    if (transaction.useCreateElement) { 
     var ownerDocument = hostContainerInfo._ownerDocument; 
     var node = ownerDocument.createComment(nodeValue); 
     ReactDOMComponentTree.precacheNode(this, node); 
     return DOMLazyTree(node); 
    } else { 
     if (transaction.renderToStaticMarkup) { 
     // Normally we'd insert a comment node, but since this is a situation 
     // where React won't take over (static pages), we can simply return 
     // nothing. 
     return ''; 
     } 
     return '<!--' + nodeValue + '-->'; 
    } 
    }, 

:これを作成することです Reactコードのこの部分で

// A perfectly valid component 
() => null 

// Also a perfectly valid component 
const MyComponent = React.createClass({ 
    render() { 
    if (this.props.hidden) return null; 
    return <p>My component implementation</p>; 
    } 
}); 
+0

うわー<!-- react-empty: X -->は表示されませんことを!感謝!私がAJAXのサーバレンダリングコンポーネント文字列 '

'のようなものを取得する場合は、このノードにマウントします。どうやってするの。 – Leen

0

ルックこの要素を示すものは空ですが、リアクションはあなたがコメントを投稿して購入します。<!-- react-empty: 3 -->すべてのJavaScriptフレームワークはDOMでコメントを使用しようとしますが、同様のコードはng-if > = 16に反応してか、例...

0

注意、あなたはもう

関連する問題