Я новичок в ReactJS.Элемент без гражданства: должен быть возвращен действительный элемент React (или null)

Я пытаюсь отобразить Hello world используя код ниже, но я получаю сообщение об ошибке:

Что я упускаю?

Код для App.js

//App.js` 

import React from 'react'; 

const App =() => "<h1>Hello World!</h1>"; 

export default App;

Код для index.js

//index.js 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 

ReactDOM.render(
    <App />, 
    document.getElementById('root') 
);

Код для /public/index.html

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>React App</title> 
    </head> 
    <body> 
    <div id="root"></div> 
    </body> 
</html>

источник

2016-12-20 Lomse

Извините @FabianSchultz, что вы имеете в виду? – Lomse

Не используйте кавычки ('' "') вокруг элемента React, попробуйте сделать это следующим образом: 'const App =() =>

Hello World!

; '. Используйте JSX или 'React.createElement'. –

Ничего себе! Благодарю. Это сработало! – Lomse

Вы не можете обернуть элемент JSX в кавычки.

Изменить этот

const App =() => "<h1>Hello World!</h1>";

этим

const App =() => <h1>Hello World!</h1>;

Вы также можете написать это

const App =() => {  
    return <h1>Hello World!</h1>; 
};

Или как это

const App =() => { 
    return (
    <h1> 
     Hello World! 
    </h1> 
); 
};

источник

2016-12-20 22:07:26

Вы также можете написать его таким образом и избежать оператора return.

Обратите внимание на отсутствие фигурных скобок, мне потребовалось некоторое время, чтобы заметить, что они простые скобки.

const App =() => (
    <h1> 
    Hello World ! 
    </h1> 
)

источник

2017-04-30 19:57:03 IanBussieres

Не можете ли вы также избежать скобок, сконцентрировав JSX на одной линии и переместив все это на ту же строку, что и стрелка? – mchandleraz

Абсолютно, но это не сработает, если у вас есть только один элемент html. Большинство компонентов имеют тенденцию иметь немного больше разметки, чем мой пример. – IanBussieres

Элемент без гражданства: должен быть возвращен действительный элемент React (или null)

Hello World!

ответ

Смежные вопросы