内联CSS样式未呈现[以前：组件未呈现其元素 - 反应]

我正在学习React。我想呈现以下组件，（index.js的内容）内联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') );

我的index.html文件如下，

<!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

嗨Danny，谢谢。但是，重命名不起作用。

中的代码仍然没有渲染。（ – RussellB

）您是否正确地导出了您的D3Dash组件？请参阅修订后的回答。 –

谢谢danny。这也没有帮助，我添加了我的package.json。是否有任何我应该拥有的JSX被正确渲染？非常感谢帮助。 – RussellB

内联CSS样式未呈现[以前：组件未呈现其元素 - 反应]

回答

相关问题