ReactJsコンポーネントが表示されません

私はreactjsの初心者であり、非常に基本的なコンポーネントをテストしようとしていますが、私の苦労はすべてブラウザに表示されないので無駄です。ReactJsコンポーネントが表示されません

私はこのチュートリアルhttps://reactjs.net/getting-started/tutorial_aspnet4.htmlに沿って、いくつかの依存関係を持つReact.Web.Mvc4 Nugetパッケージを追加する必要があると言っているので、asp.net MVC 5アプリを使用しています。

私のシンプルな構成要素は、（SimpleComponent.jsx）

var ComponentBox = React.createClass({ 
    render: function() { 
     return (<div style="background-color:antiquewhite">Hello World ReactJs Component!</div>); 
    } 
}); 

ReactDOM.render(
    <ComponentBox />, 
    document.getElementById('reactDiv') 
);

を反応させ、私のかみそりビューは

@{ 
    Layout = null; 
} 

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index</title> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script> 


</head> 
<body> 
    <div id="reactDiv"></div> 

    <script src="@Url.Content("~/Scripts/SimpleComponent.jsx")"></script> 
</body> 
</html>

は、私が何かを逃したのはかなり簡単なのですか？

出典

2017-12-21 Voice Of The Rain

コンソールにエラーがありますか？ 'style' {' background-color：antiquewhite} ''を 'style = {" background：antiquewhite "}'に変更します。 –

コンソールのエラー： 'style' propは、スタイルプロパティから文字列ではなく値へのマッピングを期待しています。たとえば、JSXを使用する場合、style = {{marginRight：spacing + 'em'}}です。このDOMノードは 'ComponentBox'によってレンダリングされました。 –

ああ私の間違いです。' style = {{"background：antiquewhite"}} 'スタイルはオブジェクトでなければなりません。もしこれを変更して動作していない場合は、開始時にStyleComponentを追加してみてください。window.onload = function（）{'close script'} ' –

私の問題のためのソリューションは、

「は、一般的には推奨されないスタイリング要素の主な手段として、スタイル属性を使用して」 react docsに基づいて

var ComponentBox = React.createClass({ 
    render: function() { 
     return (<div style={{background:'antiquewhite'}}>Hello World ReactJs Component!</div>); 
    } 
});

を以下のように私JSXファイル内のスタイル要素を交換することでした

javascriptオブジェクトを使用してスタイルをプロパティとして保存すると、これが誰かを助けてくれることを願っています。

出典

2017-12-21 09:48:56

ReactJsコンポーネントが表示されません

答えて

関連する問題