ReactDOM.render不能造成什麼

在我的主要文件，我有這樣的代碼ReactDOM.render不能造成什麼

import phoneReactElement from "../components/phone.js"; 

ReactDOM.render(<phoneReactElement />, document.getElementById('phoneComponentTester'));

「../components/phone.js」看起來是這樣的：

import React, { Component } from 'react'; 

class TestComponent extends Component { 

    constructor(props) { 
     super(props); 
    } 
    render() { 
     return (
      <div>IT WORKED</div> 
     ); 
    } 

} 
export default TestComponent;

好像它的工作正確，因爲控制檯中沒有錯誤，並且我可以在Google Chrome工具中看到該元素，但它似乎是空的。它不顯示「IT WORKED」，我在這裏做錯了什麼？

來源

2017-09-22 SSH This

這適用於我：http://plnkr.co/edit/xfThQCIsF3PAc0OA2GTo?p=preview你可以仔細檢查你正在導入正確的'phone.js'嗎？ –

感謝您將它們放在一起，似乎有一個區別可能是我導出組件（我認爲我正確地做了這件事）。我確認phone.js是正確的。 –

我在下面回答了這個問題，但只是注意到這是一個可能的重複https://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters – djfdev

import phoneReactElement from "../components/phone.js";

需求是：

import TestComponent from "../components/phone.js";

，並使其：

ReactDOM.render(<TestComponent />, document.getElementById('phoneComponentTester'));

來源

2017-09-22 22:09:49

好的，謝謝你的迴應，但我試着修復它，它似乎沒有任何區別。我認爲，既然它的默認出口，它應該無關緊要我的名字？ –

你是對的，但一致性很重要，你不應該用小寫字母檢查@djfdev回答 –

我同意，它應該是大寫，我只是希望它顯示它的工作。根據您的示例，我的代碼看起來沒有任何問題。 –

JSX把小寫的標籤，正規的HTML標籤。您應該將phoneReactElement重命名爲PhoneReactElement或以大寫字母開頭的其他名稱。

有關更多信息，請參見the docs。

來源

2017-09-22 22:11:28 djfdev

下面是一個工作示例https://www.webpackbin.com/bins/-KufbwbaId3vdmXdXLlV – djfdev

感謝您的回覆，但我可以看到它被渲染，如果你看看我附加的截圖，似乎表明這一點。我將它重命名爲'PhoneReactElement'，它似乎不起作用。 –

似乎在我提供的鏈接中工作正常...我也確認將其更改爲您的版本將呈現一個空的無效HTML元素，稱爲phonereactelement – djfdev

ReactDOM.render不能造成什麼

回答

相關問題