Передача строк в функцию React

Я создал простую функцию, которая принимает имя параметров и адрес электронной почты и отображает их на экране.

Вот мой код:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const datarow = props => <div><b>Name:{props.myname}</b><br></br><b>Email:{props.email}</b></div>;

function App() {
  return <datarow myname='James' email='[email protected]' />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Однако, когда я выполняю это в CodeSandbox, результирующая страница пуста. Никаких ошибок компиляции не происходит. Что я делаю неправильно? Я ожидаю, что я смогу передать имя и адрес электронной почты в эту функцию и получить результат на экране.

вернуть div в строке данных

— 11.02.2019 00:28

reactjs

11.02.2019 00:08

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Компонент реакции должен начинаться с заглавной буквы.

Измените его на:

const DataRow = (props) => <div><b>Name:{props.myname}</b><br></br><b>Email:{props.email}</b></div>;

const App = () => <DataRow myname='James' email='[email protected]'/>;

11.02.2019 00:34

Ответ принят как подходящий

Компоненты React всегда должны быть в корпусах Camel

Проверьте документацию здесь: https://reactjs.org/docs/glossary.html#components

Вместо этого измените свой код на это:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const DataRow = props => <div><b>Name:{props.myname}</b><br></br><b>Email:{props.email}</b></div>;

function App() {
  return <DataRow myname='James' email='[email protected]' />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Вау, спасибо! Не могу поверить, что это все было! Я привык к строго типизированному и жесткому языку, такому как C#, так что можно было подумать, что я его усвоил. Думаю, я даже не думал, что корпус может быть причиной. Спасибо Бон! И всем ответившим :)

— 11.02.2019 00:45

Datarow не верблюжий корпус. DataRow есть.

— 11.02.2019 00:55

11.02.2019 00:43