私は手で入力要素を作成することはできません

Question

私は2つの反応要素を作成しました。最初は伝統的に、react.createElementと2番目の要素を使用して作成されました。 React要素は単なるjsオブジェクトだと聞きました。 最初にうまく表示されます。 2番目にエラーが発生しています。

エラー：ReactDOM.render（）：無効なコンポーネントです。これは、意図せずにReactの2つの独立したコピーをロードすることによって引き起こされる可能性があります。

2番目の反応要素には何が問題なのですか？

<script> 
 

 

 
var first = React.createElement("h1", null, "Important Announcement"); 
 

 
var second = 
 
{ 
 
$$typeof: Symbol(React.element), 
 
"type": "h1", 
 
"key": null, 
 
"ref": null, 
 
"props": {"children": "Important Announcement"}, 
 
"_owner": null, 
 
"_store": {} 
 
} 
 

 
ReactDOM.render(first, document.getElementById('root')); 
 

 
</script>

Answer 1

$$typeof: Symbol.for('react.element')に$$typeof定義を変更すると、あなたの問題を解決する必要があります。

リアクトには、セキュリティ上の理由から、上記のhereが必要です。

下記のデモまたはjsbinをご覧ください。

var first = React.createElement("h1", null, "Important Announcement"); 
 

 
var second = { 
 
    $$typeof: Symbol.for('react.element'), 
 
    "type": "h1", 
 
    "key": null, 
 
    "ref": null, 
 
    "props": { 
 
    "children": "Important Announcement" 
 
    }, 
 
    "_owner": null, 
 
    "_store": {} 
 
} 
 

 
console.log(first, second) 
 
ReactDOM.render(second, document.getElementById('root'));

<script src="https://unpkg.com/react@15.1.0/dist/react.js"></script> 
 
<script src="https://unpkg.com/react-dom@15.1.0/dist/react-dom.js"></script> 
 

 
<div id="root"></div>