So verwenden und begrenzen Sie Requisiten in React

 <div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <!-- React-Core-Bibliothek importieren -->
  <script src="../js/react.development.js"></script>
  <!-- Einführung von react-dom zur Unterstützung von react beim Betrieb von dom -->
  <script src="../js/react-dom.development.js"></script>
  <!-- Führen Sie Babel ein, um jsx in js zu konvertieren -->
  <script src="../js/babel.min.js"></script>
  <Skripttyp = "Text/Babel">
  //Komponentenklasse „Person“ erstellen, erweitert React.Component{
    rendern() {
      konsole.log(dies);
      const{Name,Alter,Geschlecht} = this.props
      zurückkehren(
        <ul>
          <li>Name: {name}</li>
          <li>Geschlecht: {sex}</li>
          <li>Alter: {age+1}</li>
        </ul>
      )
    }
  }
  // Komponenten auf der Seite rendern ReactDOM.render(<Person name="jerry" age={19} sex="男" />,document.getElementById('test1'))
  ReactDOM.render(<Person name="tom" age={18} sex="jung" />,document.getElementById('test2'))

  const p = {name:'Frau',age:18,sex:'Frau'}
  // ReactDOM.render(<Personenname={p.name} Alter={p.age} Geschlecht={p.sex} />,document.getElementById('test3'))
  
  ReactDOM.render(<Person {...p} />,document.getElementById('test3'))

  </Skript>

<div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <!-- React-Core-Bibliothek importieren -->
  <script src="../js/react.development.js"></script>
  <!-- Einführung von react-dom zur Unterstützung von react beim Betrieb von dom -->
  <script src="../js/react-dom.development.js"></script>
  <!-- Führen Sie Babel ein, um jsx in js zu konvertieren -->
  <script src="../js/babel.min.js"></script>
  <!-- Einführung von Prop-Typen, die verwendet werden, um Komponenten-Tag-Attribute einzuschränken. Nach der Einführung gibt es noch einen weiteren Objekt-PropType auf der Welt -->
  <script src="../js/prop-types.js"></script>

  <Skripttyp = "Text/Babel">
  //Komponentenklasse „Person“ erstellen, erweitert React.Component{
    rendern() {
      konsole.log(dies);
      const{Name,Alter,Geschlecht} = this.props
      zurückkehren(
        <ul>
          <li>Name: {name}</li>
          <li>Geschlecht: {sex}</li>
          <li>Alter: {age+1}</li>
        </ul>
      )
    }
  }
  // Einschränkungsregeln Person.propTypes = {
    // Beschränken Sie den Inhalt des Namens auf eine Zeichenfolge. isRequired bedeutet, dass der Inhalt erforderlich ist und nicht weggelassen werden kann. name:PropTypes.string.isRequired.
    // Beschränken Sie das Geschlecht auf die Zeichenfolge „sex: PropTypes.string“,
    // Alter auf numerischen Wert begrenzen age: PropTypes.number,
    // Beschränken Sie „sprechen“ auf die Funktion „sprechen“: PropTypes.func
  }
  Person.defaultProps = {
    Geschlecht: 'männlich', // Geschlecht Standardwert ist männlich Alter: 18,
    sprechen: function() {
        Rückkehr [1];
    }
  }
  // Komponenten auf der Seite rendern ReactDOM.render(<Person name="jerry" age={19} />,document.getElementById('test1'))
  ReactDOM.render(<Person name="tom" age={18} sex="jung" />,document.getElementById('test2'))

  const p = {name:'Frau',age:18,sex:'Frau'}
  // ReactDOM.render(<Personenname={p.name} Alter={p.age} Geschlecht={p.sex} />,document.getElementById('test3'))
  
  ReactDOM.render(<Person {...p} />,document.getElementById('test3'))

  </Skript>

Vue.component('meine-Komponente', {
  Requisiten: {
    // Grundlegende Typprüfung („null“ und „undefined“ bestehen jede Typprüfung)
    propA: Zahl,
    // Mehrere mögliche Typen propB: [String, Number],
    // Erforderlicher String propC: {
      Typ: Zeichenfolge,
      erforderlich: true
    },
    // Numerisches propD mit Standardwert: {
      Typ: Nummer,
      Standard: 100
    },
    // Objekt propE mit Standardwerten: {
      Typ: Objekt,
      // Die Standardwerte des Objekts oder Arrays müssen aus einer Factory-Funktion default: function () { abgerufen werden.
        return { Nachricht: 'Hallo' }
      }
    },
    // Benutzerdefinierte Überprüfungsfunktion propF: {
      Validator: Funktion (Wert) {
        // Dieser Wert muss mit einem der folgenden Strings übereinstimmen return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

Zeichenfolge
Nummer
Boolescher Wert
Anordnung
Objekt
Datum
Funktion
Symbol

Funktion Person (Vorname, Nachname) {
  this.firstName = Vorname
  this.lastName = Nachname
}

Vue.component('Blog-Beitrag', {
  Requisiten: {
    Autor: Person
  }
})