Reagieren Sie auf Komponenten und Requisiten

Komponenten und Requisiten

Komponenten ähneln konzeptionell JavaScript-Funktionen. Es akzeptiert beliebige Eingabeparameter (z. B. „Requisiten“) und gibt React-Elemente zurück, die zur Beschreibung des auf der Seite angezeigten Inhalts verwendet werden.

Funktionskomponenten und Klassenkomponenten

React kann  Komponenten in zwei Formen erstellen : Klasse  und  Funktion**, aber wenn wir dies** in der Funktionskomponente drucken , erhalten wir Folgendes undefined. Wir werden dieses Problem vorerst nicht diskutieren. Jeder weiß, dass es diese beiden Methoden gibt, und wir Wir werden weiterhin unsere nächste Demonstration mit vertrauter Klassenform verwenden.

var msg = 'hello,world';
class HelloWorld extends React.Component {
  render(){
    return (
      <div>
        <h2>{msg}</h2>
      </div>
    )
  }
}
// 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
ReactDOM.render(<HelloWorld />,document.getElementById('root'));

Zum Beispiel die Funktionsform:

var msg = 'hello,world';
function HelloWorld(){
  console.log(this); // undefined
  return (
    <div>
      <h2>{msg}</h2>
    </div>
  )
}
// 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
ReactDOM.render(<HelloWorld />,document.getElementById('root'));

Verbundbauteile

Komponenten können nach Belieben kombiniert und verschachtelt werden. Wir fügen drei  <HelloWorld/>Komponenten  <Demos /> in die Komponente ein und rendern <Demos /> die Komponente.
Hinweis: Jede Komponente hat und hat nur einen  Wurzelknoten  .

var msg = 'hello,world';
class HelloWorld extends React.Component {
  render(){
    return (
      <div>
        <h2>{msg}</h2>
      </div>
    )
  }
}
class Demos extends React.Component {
  render(){
    return (
      <div>
        <HelloWorld/>  
        <HelloWorld/>  
        <HelloWorld/>  
      </div>
    )
  }
}


// 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
ReactDOM.render(<Demos />,document.getElementById('root'));

Requisiten übergeben Parameter an Komponenten

Requisiten sind die Eigenschaften der Komponente. Sie können Requisiten verwenden, um die außerhalb der Komponente übergebenen Eigenschaften und Werte abzurufen. Sie können mehrere Parameter gleichzeitig übergeben und diese über den Parameternamen abrufen.

var msg = 'hello,world';
class HelloWorld extends React.Component {
  render(){
    return (
      <div>
        <h2>组件: {this.props.value}</h2>
        {this.props.componentName?<p>{this.props.componentName}</p>:<p>未命名</p>}
      </div>
    )
  }
}
class Demos extends React.Component {
  render(){
    return (
      <div>
        <HelloWorld value={1} componentName="组件1"/>  
        <HelloWorld value={2}/>  
        <HelloWorld value={3}/>  
      </div>
    )
  }
}
// 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
ReactDOM.render(<Demos />,document.getElementById('root'));

Schreibgeschützter Charakter von Props

Unabhängig davon, ob eine Komponente mithilfe einer Funktion oder über eine Klasse deklariert wird , darf sie niemals ihre eigenen Requisiten ändern.