我正在学习 React。我正在尝试渲染以下组件(index.js 的内容)
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"
}
}
最佳答案
你成功了。这是 JSX 的问题。
在 React 中，您定义的任何组件都必须以大写字母开头，否则假定它们是普通的旧 html dom 节点。
将您的组件重新定义为 D3Dash。
编辑:此外，请确保正确导出组件。类定义应为:
导出类 D3Dash 扩展了 React.Component
或
导出默认类 D3Dash 扩展 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 包的脚本标记。
关于javascript - 内联 CSS 样式未渲染 [以前为 : Component is not rendering its elements - react]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45095366/