機能性を高めるtodolistの反応

補足知識
1 ==「インストールパラメータを確認するためにプロパ種類のパッケージをインストールNPM 

BCページ組み込ま
から輸入PropTypes 『プロップタイプ』 //パラメータの制限を

    //ページBの検証パラメータ必要
    静的propTypes = { 
        LEN：PropTypes.number.isRequired、
        addtod：PropTypes.func.isRequired 
    }

C //必要認証パラメータページ
静的propTypes = {todolistの：PropTypes.array.isRequired}

todelistの要約

 1 == "親コンポーネント内のデータ

    コンストラクタ（小道具）{ 
          スーパー（小道具）; 
          この .STATE = { 
              todolistの：[ 
                  {ID： 1、テキスト：" web111 " }、
                  {ID： 2、テキスト： "web222" }、
                  {ID： 3、テキスト： "web333" } 
              ] 
          } 
    }


 2 == 親サブアセンブリに送信されるデータ内の「コンポーネント（息子の父親）
 LETのtodolistの{}は = この .STATEを; / / 構造 
 <C todolistのtodolistの= {}> </ C> 


3 == 「サブアセンブリレンダリング
 （描画）{ 
        LET {} todolistの= これは.props; 
        はconsole.log（ "値が渡さ" 、todolistの）
         リターン（
          <UL> 
               {todolist.map（（項目、指数） => {
                  リターン   <LIキー指数= {}>} {item.Text < / LI>
                }）}
          </ UL>
        ）
    }


。4 == 「親サブアセンブリに伝達アセンブリの長さ
  <Bのtodolist.lengthのLEN = {} = {addtod この .addtod}> </ B>親
   



5 == 「サブアセンブリレンダリング
   レンダリング（）{ 
        LETがlen {}は = これは.props
         リターン（
             <DIV>を
                <INPUT TYPE = "テキスト" REF = "connの" /> <ボタンのonClickは= {this.add}> 123＃{LEN} </ボタン> 
            </ div>         ）
    } 6 == "点击按钮获取到值
    レンダリング（ ）{ 
        {LENをせ} = これは.props
         リターン（
             <DIV> 
                の<input type = "text" refが"connの" = /> <ボタンのonClick = {this.add}> 123＃{LEN} </ボタン> 
            </ DIV>         ）
    } 
    を追加 =（）=> { 
        にconsole.log（この.refs.conn.value）
        uservaluを聞かせ = この .refs。conn.value; // 値を取得します。









        {}はLETをaddtod = この .props; // サブアセンブリ渡される方法のような親要素

        addtod（uservalu）   // このメソッドが呼び出され

        、この "; =" .refs.conn.value // クリア
    }

 7 == 「親コンポーネントサブアセンブリへの送達の方法は、


 8 == 「メソッドは、親サブアセンブリのアセンブリを呼び出して、フォームの内容を返し


 9 ==」親要素状態データの変更に戻るサブアセンブリを受信します

以下は、完全なコードです

A.jsタイトル

インポートが反応、{コンポーネント} "反応する"から
エクスポートデフォルトクラスA拡張するコンポーネント{ 
    レンダリング（）{ 
        リターン（
             <DIV>我是标题ToDoリスト</ div>
        ）
    } 
}

フォームやボタンB.js

import React, { Component } from "react"
export default class B extends Component {

    add=()=>{
        console.log(this.refs.conn.value) 
        let uservalu = this.refs.conn.value; //获取值

        let {addtod}=this.props;//父组件想子组件传递了一个方法

        addtod(uservalu)  //调用这个方法

        this.refs.conn.value=""; //清空
    }

    render() {
        let { len}=this.props
        return (
            <div>
                <input type="text" ref="conn" /><button onClick={this.add} >123#{len}</button>
            </div>
        )
    }
}

C.js 渲染

import React, { Component } from "react"
export default class C extends Component {
//    constructor(props){
//        super(props);
//        let { todolist}=this.props; 
//    }

    render() {
        let { todolist } = this.props; //它等价于上面的哪一个内容
        console.log("值传递过来",todolist)
        return (
         <ul>
               {todolist.map((item,index)=>{
                 return  <li key={index}>{item.text}</li>
               })}
         </ul>
        )
    }
}

最大父组件DoAddList.js

import React, { Component } from "react"

// 引入组件
import A from "./A"
import B from "./B"
import C from "./C"


export default class DoAddList extends Component {

    constructor(props){
          super(props);
          this.state={
              todolist:[
                  { id: 1, text: "web111" },
                  { id: 2, text: "web222" },
                  { id: 3, text: "web333" }
              ]
          }
    }

    addtod=(data)=>{
        let con=this.state.todolist;
        con.unshift({ id: this.state.todolist.length + 1, text: data })

        // 跟新状态
        this.setState({
            todolist: con
        })
    }
     
    render() {
        let { todolist}=this.state; //结构
        return (
            <div>
              <A></A>
                {/* 将右边的{this.addtod 方法传递给子组件 */}
                <B len={todolist.length} addtod={this.addtod}></B>
                {/*将父组件中的数据  传递给子组件(父传子)*/}
                <C todolist={todolist}></C>
            </div>
        )
    }
}

機能性を高めるtodolistの反応

おすすめ