Question

我正在学习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"
}
}

Answer 1

你钉了它。这是JSX的一个问题。

在React中，您定义的任何组件都必须以大写字母开头，否则假设它们是普通的旧html dom节点。

改为将您的组件重新定义为[self.view addSubview:bottomLabel]; [self.view addSubview:aboveLabel];。

修改：另外，请确保正确导出组件。类定义应为：

D3Dash

或

export class D3Dash extends React.Component

取决于您导入此组件的方式。如果您已将此组件声明为通过export default class D3Dash extends React.Component挂载的同一文件，则忽略。

编辑：此外，该div上的内联样式似乎与您的描述不一致。例如，ReactDOM.render是文本颜色的css属性，color需要的不仅仅是数字。

您是否有可能改为：

border

修改：您的<div style={{ background: 'black', color: 'white', width: '200px', height: '100px', border: '1px solid black' }}>Hellow!!</div>缺少引入您的网络包的脚本标记。

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

1 个答案: