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: '', sex: '' } }, 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> ) } }
<HashRouter> <Switch> <Route exact path="/" component={Home}/> <Route exact path="/detail" component={Detail}/> </Switch> </HashRouter>
<li onClick={el => this.props.history.push({ pathname:'/detail', state:{id:3} })}> </li>
## ルートにマウントされるコンポーネントは通常、コンテナーです。 js. 通常、UI.js コンポーネントを分離し、クリックしてここにジャンプします。UI コンポーネントの props にロケーション履歴の一致はありません。
Router で上位のコンポーネントを使用する必要があります
状態のプロモーション
複数のコンポーネントが共有する必要がある状態を、それらに最も近いパブリック親コンポーネントにプロモートし、親コンポーネントがそれを props
context## を通じて子コンポーネントに配布します。
#コンポーネントが特定の状態を独自のコンテキストに保存すると、そのコンポーネントの下にあるすべての子孫コンポーネントは中間コンポーネントの転送を必要とせずにこの状態にアクセスできますが、このコンポーネントの親コンポーネントはその状態にアクセスできません。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 里面进行声明。
redux の紹介
redux は React に予測可能な状態管理メカニズムを提供します
redux はアプリケーションの状態全体をストアに保存し、ストアには状態ツリーが保存されます
コンポーネントは次のことができます。他のコンポーネントに直接通知するのではなく、ストアに動作 (アクション) をディスパッチ (ディスパッチ)
#他のコンポーネントは、ストア内の状態をサブスクライブすることで独自のビューを更新できます関連する推奨事項:反応チュートリアル
以上がReactでパラメータを渡すにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。