インラインCSSスタイルがレンダリングされない[以前：コンポーネントが要素をレンダリングしていない - 反応する]

私はリアクションを学習しています。私は（index.jsの内容は）私は数字にはできませんよ、次のコンポーネントをレンダリングするために、次のように私のindex.htmlファイルがあるインラインCSSスタイルがレンダリングされない[以前：コンポーネントが要素をレンダリングしていない - 反応する]

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 

class d3Dash extends React.Component { 
render() { 
return (
<div style={{width:200,height:100,border:1,color:"black"}}>Hellow!!</div> 
); 
} 
} 

//==============================================================================

ReactDOM.render( <d3Dash/>, document.getElementById('d3Root') );

、

<!DOCTYPE html> 
<meta charset="utf-8"> 
<html lang="en"> 
<head> 
<script async src="https://d3js.org/d3.v4.min.js"></script> 
</head> 

<body> 
<div id="d3Root"></div> 
</body> 
</html>

をしようとしていますなぜか分かりませんが、divはページ内の長方形のボックスとしてレンダリングされません。一方、htmlページの本体の中に同じコードを挿入すると、それ自体が黒い四角形のボックスとしてレンダリングされます。誰かがこれをデバッグする方法についていくつかの光を当てることができますか？それとも、JSX構文の問題ですか？

さらにとして、私のpackage.jsonは、あなたがそれを釘付け、

{ 
"name": "reactdash", 
"version": "0.0.1", 
"description": "D3js - react interactive visualization dashboard", 
"main": "index.js", 
"proxy": "http://'127.0.0.1':3002", 
"keywords": [ 
"d3", 
"react" 
], 
"author": "Russell Bertrand", 
"license": "ISC", 
"devDependencies": { 
"babel-cli": "^6.24.1", 
"eslint-plugin-flowtype": "^2.35.0", 
"eslint-plugin-import": "^2.7.0", 
"eslint-plugin-jsx-a11y": "^6.0.2", 
"eslint-plugin-react": "^7.1.0", 
"htmltojsx": "^0.2.6", 
"react": "^15.6.1", 
"react-dom": "^15.6.1", 
"react-scripts": "^1.0.10", 
"webpack": "^3.2.0" 
}, 
"scripts": { 
"start": "react-scripts start", 
"build": "react-scripts build", 
"test": "react-scripts test --env=jsdom", 
"eject": "react-scripts eject" 
} 
}

出典

2017-07-14 RussellB

回答を受け取った後、元のコードを編集しないでください。答えが理にかなっていることは非常に重要です。 –

JSXが蒸散されていないように見えます。どのようにデバッグし、これを修正するか考えていますか？ – RussellB

インラインCSSだけがレンダリングされていないので、私はそれを理解しました。私はネットをサーフしたが、どれもあまり役に立たないようだ。どのようにデバッグするかについての助けは大いに感謝されるでしょう。 – RussellB

です。 JSXの問題です。

Reactでは、定義するコンポーネントはすべて大文字で始まらなければなりません。それ以外の場合は、古いhtml domノードとみなされます。

代わりにコンポーネントをD3Dashと再定義してください。

編集：また、コンポーネントを正しくエクスポートしていることを確認してください。クラス定義は次のようになります。

export class D3Dash extends React.Component

または

export default class D3Dash extends React.Component

あなたはこのコンポーネントをインポートする方法に応じて。このコンポーネントを同じファイルに宣言した場合は、ReactDOM.renderでマウントしてください。

編集：また、そのdivのインラインスタイルは、あなたの説明と矛盾しているようです。たとえば、colorはテキストカラーのCSSプロパティであり、borderは単なる数値以上のものを必要とします。

<div style={{ 
    background: 'black', 
    color: 'white', 
    width: '200px', 
    height: '100px', 
    border: '1px solid black' }}>Hellow!!</div>

を編集：あなたindex.htmlは、あなたのWebPACKバンドルにもたらしスクリプトタグが欠落している

は、それはあなたの代わりにこれを行うことを意図している可能性があります。

出典

2017-07-14 05:37:43

こんにちはダニー、ありがとう。ただし、名前の変更は役に立ちません。まだ

のコードはレンダリングされません。： – RussellB

あなたのD3Dashコンポーネントを正しくエクスポートしていますか？改訂された回答を参照 –

ありがとうdanny。それでも役に立たないです。私はpackage.jsonを追加しました。JSXを正しくレンダリングするために必要なものはありますか？ヘルプは非常に感謝しています。 – RussellB

インラインCSSスタイルがレンダリングされない[以前：コンポーネントが要素をレンダリングしていない - 反応する]

答えて

関連する問題