Dieses Mal werde ich Ihnen die Verwendung von Komponentendefinitionen in React ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Komponentendefinitionen in React? Hier sind praktische Fälle.
Komponenten ermöglichen es Ihnen, die Benutzeroberfläche in unabhängige, wiederverwendbare Widgets zu unterteilen und jedes Widget individuell zu gestalten.
Spielt eine wichtige Rolle in Single-Page-Anwendungen (SPA)
import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
return <h1>React Component</h1>
}
ReactDOM.render(
<Component1 />,
document.getElementById('app')
)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')
)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')
)Effektvorschau
Der erste Buchstabe des Komponentennamens muss großgeschrieben werden
Die Funktion gibt einen virtuellen DOM-Knoten zurück
Klassenkomponenten müssen eine Rendermethode haben
Render muss einen virtuellen DOM-Knoten zurückgeben
In der tatsächlichen Arbeit sind Klassenkomponenten eine häufig verwendete Methode
Aufgrund des Aufrufs von Die Komponente liegt in Form von HTML-Tags vor, und HTML-Tags können Attribute hinzufügen, sodass auch benutzerdefinierte Attribute zu React-Komponenten hinzugefügt werden können. Um Attribute zu erhalten, verwenden Sie 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')
)Zusätzlich zur Übergabe von Werten in Form von DOM-Knotenattributen beim Aufruf können die Attribute der Komponente beim Aufruf auch den Standardattributwert festlegen Der entsprechende Attributwert wird nicht übergeben, der Standardattributwert wird verwendet. getDefalutProps Diese Methode wird nur einmal aufgerufen.
//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'));Normalerweise werden beim Definieren einer Komponente die Attribute definiert und einige Verwendungsbedingungen hinzugefügt, z. B. Der Datentyp muss ein Array sein, sonst dürfen einige Attribute nicht leer sein. Zu diesem Zeitpunkt kann es über propTypes festgelegt werden.
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'));prop ist standardmäßig optional, häufig verwendete Typen:
PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string
PropTypes.symbol
PropTypes.any.isRequired
Mit Komponenten können Sie die Benutzeroberfläche in unabhängige, wiederverwendbare Widgets unterteilen und jedes Widget individuell gestalten.
Spielt eine wichtige Rolle in Single-Page-Anwendungen (SPA)
import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
return <h1>React Component</h1>
}
ReactDOM.render(
<Component1 />,
document.getElementById('app')
)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')
)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')
)Effektvorschau
Der erste Buchstabe des Komponentennamens muss großgeschrieben werden
Die Funktion gibt einen virtuellen DOM-Knoten zurück
Klassenkomponenten müssen eine Rendermethode haben
Render muss einen virtuellen DOM-Knoten zurückgeben
In der tatsächlichen Arbeit sind Klassenkomponenten eine häufig verwendete Methode
Aufgrund des Aufrufs von Die Komponente liegt in Form von HTML-Tags vor, und HTML-Tags können Attribute hinzufügen, sodass auch benutzerdefinierte Attribute zu React-Komponenten hinzugefügt werden können. Um Attribute zu erhalten, verwenden Sie 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')
)Zusätzlich zur Übergabe von Werten in Form von DOM-Knotenattributen beim Aufruf können die Attribute der Komponente beim Aufruf auch den Standardattributwert festlegen Der entsprechende Attributwert wird nicht übergeben, der Standardattributwert wird verwendet. getDefalutProps Diese Methode wird nur einmal aufgerufen.
//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 来设置。
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中文网其它相关文章！
推荐阅读：
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Komponentendefinition und -verwendung in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
securefx kann keine Verbindung herstellen
Wap-Browser
Der Unterschied zwischen verteilten und Microservices
Welche Kerntechnologien sind für die Java-Entwicklung erforderlich?
Pascal-Tutorial
Welche Datentypen gibt es?
So lösen Sie das Problem, dass Ethernet keine Verbindung zum Internet herstellen kann
Was bedeutet Kontext?
