Inline-CSS-Stil wird nicht gerendert [Zuvor: Komponente rendert ihre Elemente nicht - react]

Ich lerne React. Ich versuche, die folgende Komponente (Inhalt index.js) istInline-CSS-Stil wird nicht gerendert [Zuvor: Komponente rendert ihre Elemente nicht - react]

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') );

Meine Datei index.html zu machen, wie folgt,

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

Ich bin nicht in der Lage zu Figur warum, aber div rendert sich nicht als rechteckige Box in der Seite. Wenn ich den gleichen Code in den HTML-Text einfüge, rendert er sich selbst als schwarze rechteckige Box. Könnte jemand etwas Licht ins Dunkel bringen? Oder ist es ein Problem mit der JSX-Syntax?

Als Ergänzung, mein package.json ist,

{ 
"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" 
} 
}

Quelle

2017-07-14 RussellB

Bitte bearbeiten Sie den ursprünglichen Code nicht, nachdem Sie die Antworten erhalten haben. Es ist entscheidend, dass Antworten sinnvoll sind. –

Sieht so aus, JSX wird nicht übertragen. Irgendeine Idee, wie man das ausbessert und repariert? – RussellB

Ich habe das herausgefunden, da nur das Inline-CSS nicht gerendert wird. Ich bin im Internet gesurft, aber keiner scheint mir viel zu helfen. Jede Hilfe, wie zu debuggen würde sehr geschätzt werden. – RussellB

nagelten Sie es. Es ist ein Problem mit JSX.

In React muss jede Komponente, die Sie definieren, mit einem Großbuchstaben beginnen, andernfalls wird angenommen, dass es sich um normale HTML-Knoten handelt.

Definieren Sie stattdessen Ihre Komponente als D3Dash.

Bearbeiten: Vergewissern Sie sich auch, dass Sie Ihre Komponente ordnungsgemäß exportieren. Die Klassendefinition sollte lauten:

export class D3Dash extends React.Component

oder

export default class D3Dash extends React.Component

je nachdem, wie Sie diese Komponente importieren. Wenn Sie diese Komponente in derselben Datei deklariert haben, in der Sie sie über ReactDOM.render einbinden, ignorieren Sie sie.

Bearbeiten: Auch die Inline-Stile auf diesem div scheinen nicht mit Ihrer Beschreibung überein. Zum Beispiel ist color die CSS-Eigenschaft für Textfarbe und erfordert mehr als nur eine Zahl.

Ist es möglich, dass Sie diese stattdessen tun soll:

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

Edit: Ihre index.html fehlt das Skript-Tag, das in Ihrem webpack Bündel bringt.

Quelle

2017-07-14 05:37:43

Hallo Danny, Danke. Umbenennen hilft jedoch nicht. Immer noch wird der Code innerhalb der

nicht gerendert. :( – RussellB

Exportieren Sie Ihre D3Dash-Komponente richtig? Siehe überarbeitete Antwort. –

Danke dann. Das hilft auch nicht. Ich habe meine package.json hinzugefügt. Gibt es etwas, dass ich es für die JSX richtig gerendert haben sollte? Hilfe wird sehr geschätzt. – RussellB

Inline-CSS-Stil wird nicht gerendert [Zuvor: Komponente rendert ihre Elemente nicht - react]

Antwort

Verwandte Themen