ホームページ > 記事 > ウェブフロントエンド > Reactでパラメータを渡すにはどのような方法がありますか?

Reactでパラメータを渡すにはどのような方法がありますか?

王林転載: 2021-02-02 11:41:301993ブラウズ

React は、ユーザーインターフェイスを構築するための JAVASCRIPT ライブラリです。

React は主に UI の構築に使用されますが、React を MVC の V (ビュー) だと思っている人も多いと思います。

React は、Instagram Web サイトを構築するための Facebook の内部プロジェクトとして誕生し、2013 年 5 月にオープンソース化されました。

React は高いパフォーマンスと非常にシンプルなコードロジックを備えているため、ますます多くの人が注目し、使用し始めています。

#最も一般的なのは、親コンポーネントと子コンポーネントの間でパラメーターを渡すことです

#親コンポーネントは子コンポーネントに値を渡します。これは this.props を使用することで直接実現できます

親コンポーネントで、必要なデータを渡すサブコンポーネントにカスタム属性を追加します。親コンポーネントから渡されたデータは、サブコンポーネントの this.props を通じて取得できます。

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

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

サブコンポーネントが渡された場合親コンポーネントに値を渡すには、親コンポーネントに設定する必要がある関数と状態を受け取り、その関数名を props を通じてサブコンポーネントに渡す

#つまり、親コンポーネントを子コンポーネントに渡す方法サブコンポーネントを作成し、サブコンポーネント内でそれを呼び出します

//孙子组件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>        )
    }
}

少し前に誰かが質問したのですが、コンストラクターの super() は何に使用されますか?

要約:

これをサブクラスのコンストラクターで使用したい場合は、親クラスのコンストラクターを呼び出す必要があります。そうしないと、これを取得できません。

Then親クラスのコンストラクターをどのように呼び出すかという問題が発生します。 super() を通じて

#親コンポーネントによって渡されたパラメーターをコンストラクターで使用したい場合は、super を呼び出すときにパラメーターを親コンポーネントのコンストラクターに渡す必要があります。

そうしない場合は、これをコンストラクターまたはパラメーターで使用します。スーパーは必要ありません。React がこれを行ってくれるので、props のバインディング

ルーティングパラメーター

npm install reverse-router-dom をインストールします。 --save-dev

ルートを定義します (通常は外部に配置されます)

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

ページがジャンプするとき

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

this.props.history.location を通じて渡されたデータを受信します

ルーティングパラメーターにこの問題が発生する可能性があります。つまり、ルートの定義時にマウントされたコンポーネントのみが props の位置履歴の一致を持ちます。

## ルートにマウントされるコンポーネントは通常、コンテナーです。 js. 通常、UI.js コンポーネントを分離し、クリックしてここにジャンプします。UI コンポーネントの props にロケーション履歴の一致はありません。

Router で上位のコンポーネントを使用する必要があります

状態のプロモーション

複数のコンポーネントが共有する必要がある状態を、それらに最も近いパブリック親コンポーネントにプロモートし、親コンポーネントがそれを props

context## を通じて子コンポーネントに配布します。

#コンポーネントが特定の状態を独自のコンテキストに保存すると、そのコンポーネントの下にあるすべての子孫コンポーネントは中間コンポーネントの転送を必要とせずにこの状態にアクセスできますが、このコンポーネントの親コンポーネントはその状態にアクセスできません。

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

  constructor () {
    super()
    this.state = { themeColor: &#39;red&#39; }
  }

  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 里面进行声明。

redux の紹介

redux は React に予測可能な状態管理メカニズムを提供します

redux はアプリケーションの状態全体をストアに保存し、ストアには状態ツリーが保存されます

コンポーネントは次のことができます。他のコンポーネントに直接通知するのではなく、ストアに動作 (アクション) をディスパッチ (ディスパッチ)

#他のコンポーネントは、ストア内の状態をサブスクライブすることで独自のビューを更新できます

Reactでパラメータを渡すにはどのような方法がありますか?

関連記事