ホームページ > 記事 > ウェブフロントエンド > Reactにおけるコンポーネントの定義と使い方を詳しく解説
Reactにおけるコンポーネントの定義と使い方を詳しく解説
- php中世界最好的语言オリジナル
- 2018-05-24 14:39:581395ブラウズ
今回は React でのコンポーネント定義の使用について詳しく説明します。 React でコンポーネント定義を使用する際の 注意事項 は何ですか?実際のケースを見てみましょう。
コンポーネントコンポーネントを使用すると、UI を独立した再利用可能なウィジェットに分割し、各ウィジェットを個別にデザインできます。 シングルページアプリケーション(SPA)で重要な役割を果たしますコンポーネントの単純な実装 - 機能コンポーネントimport React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
return <h1>React Component</h1>
}
ReactDOM.render(
<Component1 />,
document.getElementById('app')
)
クラスコンポーネント - ES5構文var React = require('react');
var ReactDOM = require('react-dom')
var Component1 = React.createClass({
render: function(){
return (
<p>
<h1>Tom</h1>
<h1>Sam</h1>
</p>
)
}
})
ReactDOM.render(
<Component1 />,
document.getElementById('app')
)
クラスコンポーネント - ES6構文import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
render(){
return (
<p>
<h1>Tom</h1>
<h1>Sam</h1>
</p>
)
}
}
ReactDOM.render(
<Component1 />,
document.getElementById('app')
)
効果のプレビューコンポーネントの概要
- コンポーネント名の最初の文字は大文字にする必要があります
- 関数は仮想 DOM ノードを返します
- クラスコンポーネントには render メソッドが必要です
- render は仮想 DOM ノードを返す必要があります
- 実際には動作しますその中でもよく使われるのがクラスコンポーネントです
this.props を使用して取得されます
機能コンポーネント
import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = (props) => {
return <h1>name-{props.name}</h1>
}
ReactDOM.render(
<Component1 name="Sam"/>,
document.getElementById('app')
)
クラスコンポーネント
import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
render(){
return <h1>name-{this.props.name}</h1>
}
}
ReactDOM.render(
<Component1 name="Sam"/>,
document.getElementById('app')
)
DefaultProps
this.props函数式组件
//es5
var React = require('react');
var ReactDOM = require('react-dom');
var Component1 = React.createClass({
getDefaultProps: function(){
return {
name: 'Tom',
age: 20
}
},
render: function(){
return (
<p>
<p>姓名：{this.props.name}</p>
<p>年龄：{this.props.age}</p>
</p>
)
}
})
//es6
import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
static defaultProps = {
name: 'Tom',
age: 20
}
render(){
return (
<p>
<h1>姓名：{this.props.name}</h1>
<h1>年龄：{this.props.age}</h1>
</p>
)
}
}
//或者
Component1.defaultProps = {
name: "Sam",
age: 22
}
//使用
ReactDOM.render(<Component1/>, document.getElementById('p1'));
类组件
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types'
class Component1 extends React.Component{
render(){
return (
<p>
<p>姓名：{this.props.name}</p>
<p>年龄：{this.props.age}</p>
<p>学科：</p>
<ul>
{
this.props.subjects.map(function(_item){
return <li>{_item}</li>
})
}
</ul>
</p>
)
}
}
//定义属性 name 为字符串且必须有值
Component1.propTypes = {
name: PropTypes.string
}
ReactDOM.render(<Component1 name="Tom"/>, document.getElementById('p1'));
默认属性(DefaultProps)
组件的属性除了可以通过调用的时候以 DOM 节点属性的方式传值，也可以设置默认的属性值，如果调用的时候没有传对应的属性值，则会用默认的属性值。getDefalutProps 这个方法只会被调用一次。
import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
return <h1>React Component</h1>
}
ReactDOM.render(
<Component1 />,
document.getElementById('app')
)
属性的类型规则(propTypes)
通常情况下，在定义一个组件的时候把属性定义好，会加上一些使用的条件限制，比如某些属性值的数据类型必须是数组，或者某些属性不能为空，在这个时候，可以通过 propTypes 来设置。
var React = require('react');
var ReactDOM = require('react-dom')
var Component1 = React.createClass({
render: function(){
return (
<p>
<h1>Tom</h1>
<h1>Sam</h1>
</p>
)
}
})
ReactDOM.render(
<Component1 />,
document.getElementById('app')
)
prop 默认情况下是可选，常用的类型：
PropTypes.arrayPropTypes.boolPropTypes.funcPropTypes.numberPropTypes.objectPropTypes.stringPropTypes.symbolPropTypes.any.isRequired
组件
组件使你可以将 UI 划分为一个一个独立，可复用的小部件，并可以对每个部件进行单独的设计。
在单页面应用(SPA)中扮演着重要角色
组件简单实现 —— 函数式组件
import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
render(){
return (
<p>
<h1>Tom</h1>
<h1>Sam</h1>
</p>
)
}
}
ReactDOM.render(
<Component1 />,
document.getElementById('app')
)
类组件 —— ES5 语法
import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = (props) => {
return <h1>name-{props.name}</h1>
}
ReactDOM.render(
<Component1 name="Sam"/>,
document.getElementById('app')
)
类组件 —— ES6 语法
import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
render(){
return <h1>name-{this.props.name}</h1>
}
}
ReactDOM.render(
<Component1 name="Sam"/>,
document.getElementById('app')
)
效果预览
组件小结
组件名首字母必须为大写
函数返回一个虚拟 DOM 节点
类组件必须要有 render 方法
render 必须返回一个虚拟 DOM 节点
实际工作中，类组件是常用的方式
组件属性(Props)
因为组件的调用是 html 标签的形式，而 html 标签是可以添加属性，所以在 React 的组件当中也是可以添加自定义的属性，而属性的获取则用 this.props
函数式组件
//es5
var React = require('react');
var ReactDOM = require('react-dom');
var Component1 = React.createClass({
getDefaultProps: function(){
return {
name: 'Tom',
age: 20
}
},
render: function(){
return (
<p>
<p>姓名：{this.props.name}</p>
<p>年龄：{this.props.age}</p>
</p>
)
}
})
//es6
import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
static defaultProps = {
name: 'Tom',
age: 20
}
render(){
return (
<p>
<h1>姓名：{this.props.name}</h1>
<h1>年龄：{this.props.age}</h1>
</p>
)
}
}
//或者
Component1.defaultProps = {
name: "Sam",
age: 22
}
//使用
ReactDOM.render(<Component1/>, document.getElementById('p1'));
类组件
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types'
class Component1 extends React.Component{
render(){
return (
<p>
<p>姓名：{this.props.name}</p>
<p>年龄：{this.props.age}</p>
<p>学科：</p>
<ul>
{
this.props.subjects.map(function(_item){
return <li>{_item}</li>
})
}
</ul>
</p>
)
}
}
//定义属性 name 为字符串且必须有值
Component1.propTypes = {
name: PropTypes.string
}
ReactDOM.render(<Component1 name="Tom"/>, document.getElementById('p1'));
默认属性(DefaultProps)
组件的属性除了可以通过调用的时候以 DOM 节点属性的方式传值，也可以设置默认的属性值，如果调用的时候没有传对应的属性值，则会用默认的属性值。getDefalutPropsコンポーネントの属性に加えて、値を DOM ノード属性の形式で渡すことができます。呼び出し時に対応する属性値が渡されない場合は、デフォルトの属性値が使用されます。 getDefalutProps このメソッドは 1 回だけ呼び出されます。
属性タイプのルール (propTypes)
🎜 通常、コンポーネントを定義するときは、属性が定義され、いくつかの使用条件が追加されます ()。 a href="http://www.php.cn/code/222.html" target="_blank">一部の属性値のデータ型 🎜 は配列でなければなりません。現時点では、一部の属性を空にすることはできません。 、propTypes を通じて設定できます。 🎜rrreee🎜prop はデフォルトでオプションであり、一般的に使用されるタイプ: 🎜🎜🎜🎜PropTypes.array🎜🎜🎜🎜PropTypes.bool🎜🎜🎜🎜 PropTypes。 func🎜🎜🎜🎜PropTypes.number🎜🎜🎜🎜PropTypes.object🎜🎜🎜🎜PropTypes.string🎜 🎜🎜 🎜PropTypes.symbol🎜🎜🎜🎜PropTypes.any.isRequired🎜🎜🎜🎜コンポーネント🎜🎜コンポーネントを使用すると、UI を独立した反復可能なウィジェットに分割でき、それぞれが使用されますウィジェットは個別にデザインできます。 🎜🎜シングルページアプリケーション(SPA)で重要な役割を果たします🎜🎜コンポーネントの単純な実装 - 機能コンポーネント🎜rrreee🎜クラスコンポーネント - ES5構文🎜rrreee🎜クラスコンポーネント - ES6構文🎜rrreee🎜効果のプレビュー🎜🎜コンポーネントの概要🎜🎜🎜 🎜コンポーネント名の最初の文字は大文字にする必要があります🎜🎜🎜🎜関数は仮想DOMノードを返します🎜🎜🎜🎜クラスコンポーネントにはレンダリングメソッドが必要です🎜🎜🎜🎜レンダリングは仮想DOMノードを返す必要があります🎜🎜🎜🎜実際の作業その中でもよく使われるのがクラスコンポーネントです🎜🎜🎜🎜コンポーネントのプロパティ(Props)🎜🎜コンポーネントはhtmlタグの形で呼び出され、htmlタグには属性を追加できるため、Reactコンポーネントにもカスタム属性を追加することができます。 、プロパティは this.props を使用して取得されます🎜機能コンポーネント
rrreeeクラスコンポーネント
rrreeeDefaultProps
🎜コンポーネントの属性に加えて、値を DOM ノード属性の形式で渡すことができます。呼び出し時に対応する属性値が渡されない場合は、デフォルトの属性値が使用されます。
getDefalutProps このメソッドは 1 回だけ呼び出されます。 🎜//es5
var React = require('react');
var ReactDOM = require('react-dom');
var Component1 = React.createClass({
getDefaultProps: function(){
return {
name: 'Tom',
age: 20
}
},
render: function(){
return (
<p>
<p>姓名：{this.props.name}</p>
<p>年龄：{this.props.age}</p>
</p>
)
}
})
//es6
import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
static defaultProps = {
name: 'Tom',
age: 20
}
render(){
return (
<p>
<h1>姓名：{this.props.name}</h1>
<h1>年龄：{this.props.age}</h1>
</p>
)
}
}
//或者
Component1.defaultProps = {
name: "Sam",
age: 22
}
//使用
ReactDOM.render(<Component1/>, document.getElementById('p1'));
属性的类型规则(propTypes)
通常情况下，在定义一个组件的时候把属性定义好，会加上一些使用的条件限制，比如某些属性值的数据类型必须是数组，或者某些属性不能为空，在这个时候，可以通过 propTypes 来设置。
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types'
class Component1 extends React.Component{
render(){
return (
<p>
<p>姓名：{this.props.name}</p>
<p>年龄：{this.props.age}</p>
<p>学科：</p>
<ul>
{
this.props.subjects.map(function(_item){
return <li>{_item}</li>
})
}
</ul>
</p>
)
}
}
//定义属性 name 为字符串且必须有值
Component1.propTypes = {
name: PropTypes.string
}
ReactDOM.render(<Component1 name="Tom"/>, document.getElementById('p1'));
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上がReactにおけるコンポーネントの定義と使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。