Heim > Artikel > Web-Frontend > Was sind Eltern-Kind-Komponenten in React
Was sind Eltern-Kind-Komponenten in React
- 青灯夜游Original
- 2022-07-13 18:51:411938Durchsuche
Bei den gegenseitigen Aufrufen zwischen Reaktionskomponenten wird der Anrufer als übergeordnete Komponente und der Angerufene als untergeordnete Komponente bezeichnet. Werte können zwischen übergeordneten und untergeordneten Komponenten übergeben werden: 1. Wenn eine übergeordnete Komponente einen Wert an eine untergeordnete Komponente übergibt, wird der zu übergebende Wert zuerst an die untergeordnete Komponente übergeben, und dann werden in der untergeordneten Komponente Requisiten verwendet Empfangen Sie den von der übergeordneten Komponente übergebenen Wert. 2. Untergeordnete Komponente Wenn Sie Werte an die übergeordnete Komponente übergeben, müssen Sie diese über die Trigger-Methode an die übergeordnete Komponente übergeben.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, React18-Version, Dell G3-Computer.
1. Komponenten in React
Die React-Komponente ist ein selbstdefiniertes Nicht-HTML-Tag. Es ist festgelegt, dass der erste Buchstabe großgeschrieben werden sollte: 首字母大写：
class App extends Component{
}
<app></app>
二、父子组件
组件的相互调用中，把调用者称为父组件，被调用者称为子组件：
import React from 'react';
import Children from './Children';
class Up extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
render(){
console.log("render");
return(
<div>
up
<children></children>
</div>
)
}
}
export default Up;
import React from 'react';
class Children extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
return (
<div>
Children
</div>
)
}
}
export default Children;
三、父组件给子组件传值
父组件向子组件传值使用props。父组件向子组件传值时，先将需要传递的值传递给子组件，然后在子组件中，使用props来接收父组件传递过来的值。
父组件在调用子组件的时候定义一个属性：
<children></children>
这个值msg会绑定在子组件的props
this.props.msg
2. In der gegenseitigen Berufung Übergeordnete und untergeordnete Komponenten
Komponenten, setzen SieDer Aufrufer wird als übergeordnete Komponente bezeichnet, und der Angerufene wird als untergeordnete Komponente bezeichnet: import React from 'react';
import Children from './Children';
class Up extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
render(){
console.log("render");
return(
<div>
up
<Children msg="父组件传值给子组件" />
</div>
)
}
}
export default Up;
import React from 'react';
class Children extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
return (
<div>
Children
<br>
{this.props.msg}
</div>
)
}
}
export default Children;
3 Die übergeordnete Komponente übergibt den Wert an die untergeordnete KomponenteDie übergeordnete Komponente übergibt den Wert an die untergeordnete Komponente. Werte verwenden Requisiten. Wenn eine übergeordnete Komponente einen Wert an eine untergeordnete Komponente übergibt, wird der zu übergebende Wert zuerst an die untergeordnete Komponente übergeben. Anschließend werden in der untergeordneten Komponente Requisiten verwendet, um den von der übergeordneten Komponente übergebenen Wert zu empfangen.
Die übergeordnete Komponente definiert beim Aufrufen der untergeordneten Komponente eine Eigenschaft:
import React from 'react';
import Children from './Children';
class Up extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
run = () => {
console.log("父组件run方法");
}
render(){
console.log("render");
return(
up
<children></children>
)
}
}
export default Up;Dieser Wert msg wird an das Attribut props der untergeordneten Komponente und der untergeordneten Komponente gebunden kann direkt verwendet werden:
import React from 'react';
class Children extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
run = () => {
this.props.run();
}
render(){
return (
<div>
Children
<br>
<button>Run</button>
</div>
)
}
}
export default Children;
Die übergeordnete Komponente kann Werte und Methoden an die Komponente übergeben und sich sogar selbst an die untergeordnete Komponente übergeben
3.1 Werte übergeben
import React from 'react';
import Children from './Children';
class Up extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
run = () => {
console.log("父组件run方法");
}
render(){
console.log("render");
return(
<div>
up
<Children msg={this}/>
</div>
)
}
}
export default Up;import React from 'react';
class Children extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
run = () => {
console.log(this.props.msg);
}
render(){
return (
<div>
Children
<br>
<button>Run</button>
</div>
)
}
}
export default Children;
3.2 Methoden übergeben
import React from 'react';
import Children from './Children';
class Up extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
getChildrenData = (data) => {
console.log(data);
}
render(){
console.log("render");
return(
up
<children></children>
)
}
}
export default Up;
import React from 'react';
class Children extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
return (
<div>
Children
<br>
<button> {this.props.upFun("子组件数据")}}>Run</button>
</div>
)
}
}
export default Children;
3.3 Die übergeordnete Komponente übergibt den Wert an die untergeordnete Komponente Komponente über die Trigger-Methode
import React from 'react';
import Children from './Children';
class Up extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
clickButton = () => {
console.log(this.refs.children);
}
render(){
console.log("render");
return(
up
<children></children>
)
}
}
export default Up;
```
```js
import React from 'react';
class Children extends React.Component{
constructor(props){
super(props);
this.state = {
title: "子组件"
}
}
runChildren = () => {
}
render(){
return (
Children
)
}
}
export default Children;
```
rrreee🎜5. Die übergeordnete Komponente. Erhalten Sie Attribute und Methoden der Unterkomponente über refs🎜🎜rrreee🎜[Verwandte Empfehlungen: 🎜Redis-Video-Tutorial🎜]🎜Das obige ist der detaillierte Inhalt vonWas sind Eltern-Kind-Komponenten in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!