Welche Möglichkeiten gibt es, Parameter in React zu übergeben?

React ist eine JAVASCRIPT-Bibliothek zum Erstellen von Benutzeroberflächen.

React wird hauptsächlich zum Erstellen einer Benutzeroberfläche verwendet. Viele Leute denken, dass React das V (Ansicht) in MVC ist.

React entstand aus dem internen Projekt von Facebook und wurde zum Aufbau der Website von Instagram verwendet und wurde im Mai 2013 als Open Source bereitgestellt.

React hat eine hohe Leistung und eine sehr einfache Codelogik. Immer mehr Menschen achten darauf und nutzen es.

Am häufigsten werden Parameter zwischen übergeordneten und untergeordneten Komponenten übergeben.

Die übergeordnete Komponente übergibt Werte an die untergeordneten Komponenten. Dies kann direkt mit this.props erreicht werden.

Fügen Sie in der übergeordneten Komponente ein benutzerdefiniertes Attribut hinzu die untergeordnete Komponente, die Daten übertragen muss. In der untergeordneten Komponente können Sie die von der übergeordneten Komponente übergebenen Daten über this.props abrufen.

// 父组件 render() {        
    return (                // 使用自定义属性传递需要传递的方法或者参数
                <ShopUi toson={this.state}></ShopUi>            
                   )
    } 

//子组件　//通过this.props.toson就可以获取到父组件传递过来的数据 、、如果还需要往孙组件传递那么在子组件通过自定义属性继续传递就行了
      tograndson={this.props.toson}
、、孙组件通过this.props.tograndson获取到数据

Wenn die untergeordnete Komponente den Wert an die übergeordnete Komponente übergibt, müssen Sie die Empfangsfunktion festlegen und Zustand in der übergeordneten Komponente und übergeben Sie gleichzeitig den Funktionsnamen über Requisiten an die untergeordnete Komponente

Das heißt, die Methode zum Übergeben der übergeordneten Komponente an die untergeordnete Komponente wird in der untergeordneten Komponente aufgerufen

//孙子组件export default class Grandson extends Component{
    render(){        return (            <div style={{border: "1px solid red",margin: "10px"}}>
　　　　　　　　{this.props.name}：                <select onChange={this.props.handleSelect}>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>        )
    }
}; 
//子组件export default class Child extends Component{
    render(){        return (            <div style={{border: "1px solid green",margin: "10px"}}>
                {this.props.name}：<input onChange={this.props.handleVal}/>
                <Grandson name="性别" handleSelect={this.props.handleSelect}/>
            </div>        )
    }
}; 
//父组件export default class Parent extends Component{
 
    constructor(props){
        super(props)        this.state={
            username: &#39;&#39;,
            sex: &#39;&#39;
        }   
    },
    handleVal(event){        this.setState({username: event.target.value});
    },
    handleSelect(value) {        this.setState({sex: event.target.value});
    },
    render(){        return (            <div style={{border: "1px solid #000",padding: "10px"}}>
                <div>用户姓名：{this.state.username}</div>
                <div>用户性别：{this.state.sex}</div>
                <Child name="姓名" handleVal={this.handleVal} handleSelect={this.handleSelect}/>
            </div>        )
    }
}

Jemand hat mich gefragt Diese Frage vor einiger Zeit: Wozu dient super() im Konstruktor?

Um es zusammenzufassen:

Wenn Sie dies im Konstruktor der Unterklasse verwenden möchten, müssen Sie den Konstruktor der übergeordneten Klasse aufrufen, sonst erhalten Sie dies nicht

Dann stellt sich die Frage, wie man den Konstruktor der Unterklasse aufruft Elternklasse? Durch super()

Wenn Sie die von der übergeordneten Komponente im Konstruktor übergebenen Parameter verwenden möchten, müssen Sie die Parameter beim Aufruf von super der übergeordneten Komponente an den Konstruktor der übergeordneten Komponente übergeben

Wenn Sie dies nicht verwenden oder Parameter im Konstruktor benötigen Sie nicht super ; Da React dies für Sie erledigt hat, ist die Bindung von Requisiten

Routenparameterübergabe

Installieren Sie npm install reagieren-router-dom --save-dev

Definieren Sie die Route (normalerweise außerhalb platziert)

 <HashRouter> 
    <Switch> 
        <Route exact path="/" component={Home}/> 
        <Route exact path="/detail" component={Detail}/> 
    </Switch> 
</HashRouter>

Wenn die Seite beim Springen

<li  onClick={el =>　this.props.history.push({
　　　pathname:&#39;/detail&#39;,
    　 state:{id:3}
})}>
</li>

receive Die übergebenen Daten können über this.props.history.location abgerufen werden

Bei der Übergabe von Routenparametern kann dieses Problem auftreten, d Definiert enthält Requisiten zum Standortverlauf

Die auf der Route bereitgestellte Komponente ist normalerweise Container.js. Im Allgemeinen trennen wir die UI.js-Komponente und klicken hier, um zu springen. Es ist kein Standortverlaufsabgleich erforderlich

Die UI-Komponenten-Requisiten verwenden die höherwertige Komponente mit Router

Statusförderung

, um den Status, den mehrere Komponenten gemeinsam nutzen müssen, auf die gemeinsame übergeordnete Komponente zu befördern, die ihnen am nächsten liegt, und die übergeordnete Komponente verteilt ihn dann über Requisiten an die untergeordnete Komponente

class Index extends Component {
  static childContextTypes = {
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: 'red' }
  }

  getChildContext () {
    return { themeColor: this.state.themeColor }
  }

  render () {
    return (
      <div>
        <Header />
        <Main />
      </div>
    )
  }
}
通过getChildContext()将属性传递给所有的子孙组件
提供 context 的组件必须提供 childContextTypes 作为 context 的声明和验证。

class Title extends Component {
  static contextTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
      <h1 style={{ color: this.context.themeColor }}>标题</h1>
    )
  }
}
子组件要获取 context 里面的内容的话，就必须写 contextTypes 来声明和验证你需要获取的状态的类型，它也是必写的，如果你不写就无法获取 context 里面的状态。
Title 想获取 themeColor，它是一个字符串，我们就在 contextTypes 里面进行声明。

Reaktions-Tutorial

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, Parameter in React zu übergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!