So legen Sie das Props-Attribut fest-js-Tutorial-php.cn

So legen Sie das Props-Attribut fest

清浅

Freigeben： 2020-09-08 10:05:55

Original

4495 Leute haben es durchsucht

So legen Sie das Props-Attribut fest

Props (Eigenschaften)

sind die Eigenschaften der Komponente selbst. Die Eigenschaften in Props entsprechen eins zu eins den Komponenteneigenschaften . Verantwortlich für die Weitergabe von Informationen

1. Übergeben Sie Daten von der übergeordneten Komponente an die untergeordnete Komponente

//定义webName组件，负责输出名字
var webName = React.createClass({
  render : function() {
    return <h1>{this.props.webname} </h1>;
  }
})
//定义webLink组件，负责跳转链接
var webLink = React.createClass({
  render : function() {
    return <a href={this.props.weblink}>{this.props.weblink}</a>
  }
})
 
var webShow = React.createClass({
  render : function(){
    <div>
      <webName webname={this.props.webname}/>
      <webLink weblink={this.props.weblink}/>
    </div>
  }
})
 
//渲染
ReactDom.render{
  return function() {
    <webShow webname = "hellp" weblink = "www.baidu.com" />,
      document.getElementById("container")
  }
}

Nach dem Login kopieren

2. Legen Sie Standardattribute fest

durch static defaultProps = {} ist ein festes Format zum Hinzufügen von Standardeigenschaften zu einer Komponente

3. Die Attributprüfung

erfolgt durch static propTypes = {} Das Format des Attributs, zum Beispiel setzen wir Alter auf Zahlentyp

export default class MyView extends Component {
  static defaultProps = {
    age: 12,
    sex: &#39;男&#39;
  }
 
  render() {
    return <Text
        style={{backgroundColor: &#39;cyan&#39;}}>
      你好{this.props.name}{&#39;\n&#39;}年龄{this.props.age}{&#39;\n&#39;}性别{this.props.sex}
    </Text>
  }
}

Nach dem Login kopieren

Erweiterungsoperator... ist eine neue Funktion der ES6-Syntax. ...this.porps, eine Syntax, die alle Eigenschaften in der übergeordneten Komponente in die untergeordnete Komponente kopiert

2 Die übergeordnete Komponente übergibt die aufrufende Funktion an die untergeordnete Komponente, um die übergeordnete Komponente über die Nachricht zu informieren.

3 wird als Markierung für die logische Beurteilung von Unterkomponenten, Rendering-Stilen usw. verwendet.

4 untergeordnete Knoten, die keine der Komponente entsprechenden Attribute sind, repräsentieren alle untergeordneten Knoten der Komponente .

var title = React.createClass({
  propTypes={
    //title类型必须是字符串
    title : React.PropTypes.string.isRequired
  },
  render : function() {
    return <h1>{this.props.title}</h1>
  }
})

Nach dem Login kopieren

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für alle hilfreich sein

Das obige ist der detaillierte Inhalt vonSo legen Sie das Props-Attribut fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!