将字符串传递给React函数

时间:2019-02-10 23:08:48

标签: reactjs

我创建了一个简单的函数来接受参数名称和电子邮件,并在屏幕上显示它们。

这是我的代码:

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='james@place.org' />;
}

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

但是,当我在CodeSandbox中执行此操作时,结果页面为空白。没有编译错误发生。我究竟做错了什么?我的期望是我应该能够将名称和电子邮件传递给此功能,并在屏幕上显示结果。

2 个答案:

答案 0 :(得分:0)

react组件必须以大写字母开头。

将其更改为:

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

const App = () => <DataRow myname='James' email='james@place.org'/>;

答案 1 :(得分:0)

反应组件应始终放在骆驼壳上

在此处检查文档: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='james@place.org' />;
}

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