制作组件的方法

在React中，有两种组件描述方法，一种是使用函数的函数组件，另一种是使用类的类组件。

函数组件

function FunctionComponent() {
	return (
		<div>
			<h1> Hello, World! </h1>
		</div>
	);
}

export default FunctionComponent;

const FunctionComponent = () => {
	return (
		<div>
			<h1> Hello, World! </h1>
		</div>
	);
}

export default FunctionComponent;

函数组件是使用函数来定义的。有两种常见的函数定义方式，一是普通函数，二是箭头函数，所以函数组件可以同时使用这两种定义方式。

类组件

class ClassComponent extends React.Component {
	render(){
		return(
			<div>
				<h1> Hello, World! </h1>
			</div>
		);
	}
}

如果要定义一个类组件，则需要在继承React.Component的类中进行定义。
render方法是在React的类组件中定义的一个特殊方法，必须始终实现。它在组件渲染时被调用，并负责返回JSX。

父组件和子组件

在React中，使用一个组件中的另一个组件是很重要的概念，这就是父组件和子组件的关系。

主要组件：使用者

const ParentComponent() {
	return(
		<div>
			<ChildComponent />
		</div>
	)
}

被使用的一方：子组件

const ChildComponent() {
	return(
		<div>
			<p>Hello React!!</p>
		</div>
	)
}

如此一来，ParentComponent作为父组件使用ChildComponent作为子组件。

从父组件传递数据到子组件可以使用props对象来进行。关于props的详细说明已经单独总结了。

撰写组件时需要注意的要点

在描述组件时，有几点需要注意。

１．标签名称的首字母

//間違った書き方
const myComponent = () => {
	// ...
}

//正しい書き方
const MyComponent = () => {
	// ...
}

在React中，组件的标签名必须以大写字母开头。以小写字母开头的标签会被识别为内置的HTML元素。为了表示组件是自定义的，必须以大写字母开头。

２．课程属性不是class，而是className。

//HTML
<div class="my-class">Content</div>

//React
<div className="my-class">Content</div>

如果要为标签指定类属性，则使用的不是class，而是className。这是为了区分JavaScript中的类和使用className属性而使用的。

３. return只包含一个元素

// エラー
return(
	<p>１つ目</p>
	<p>２つ目</p>
)
//正解パターン１
return(
	<div>
		<p>１つ目</p>
		<p>２つ目</p>
	</div>
)
//正解パターン2
return(
	<React.Fragment>
		<p>１つ目</p>
		<p>２つ目</p>
	</React.Fragment>
)
//正解パターン3
return(
	<>
		<p>１つ目</p>
		<p>２つ目</p>
	</>
)

由于return只能返回一个元素，如果返回多个元素会导致错误。可以使用