import React from 'react'; import ReactDOM from 'react-dom'; class Hello extends React.Component{ constructor(){ super(); //1.建立ref this.txtRef = React.createRef(); } handleClick = ()=>{ //3.經過this.txtRef.current使用 console.log(this.txtRef.current.value); } render(){ return ( <div> {/* 2.綁定ref */} <input text="text" ref={this.txtRef}/> <button type="button" onClick={this.handleClick}>取值</button> </div> ) } } ReactDOM.render(<Hello></Hello>,document.getElementById("root"));
//函數組件 const Hello = props => { // props 就表示傳遞給組件的屬性 console.log(props); } //給組件傳參數 <Hello name="jack" age={19} colors={['red','blue','green']} /> // 類組件: class Hello extends React.Component { constructor(props) { super(props) // console.log('在構造函數中,獲取到 props ', this.props) console.log('在構造函數中,獲取到 props ', props) } render() { console.log('class組件中獲取到props:', this.props) return ( <div> <h1>props:{this.props.age}</h1> {this.props.colors.map((item, index) => ( <p key={index}>{item}</p> ))} </div> ) } }
// 父組件: class Parent extends React.Component { // 提供數據 state = { lastName: '王' } render() { return ( <div className="parent"> <h1>父組件:</h1> {/* 1 經過屬性給子組件傳遞數據 */} <Child name={this.state.lastName} /> </div> ) } } // 子組件: // 2 子組件中經過 props 接收數據 const Child = props => { return <p className="child">這是子組件:{props.name}</p> }
思路:父組件提供一個事件(函數),讓子組件調用;子組件調用的時候,將數據做爲參數的傳遞,父組件中經過事件(函數)的參數,就拿到子組件中的數據了。react
1 父組件提供事件數組
2 將事件經過props傳遞給子組件dom
3 子組件中經過props接收到父組件中傳遞過來的事件ide
4 子組件調用該事件,將數據做爲參數傳遞函數
注意點:父組件提供的方法中 this 執行問題。ui
// 1 提供事件(回調函數,) // 事件是子組件調用的,所以,先要經過 props 傳遞給子組件 // 2 將事件傳遞給子組件 class Parent extends React.Component { state = { msg: '' } getChildMsg = data => { console.log('父組件中的方法調用了', data) this.setState({ msg: data }) } // 注意:this指向問題,由於這個方法是由子組件調用的,因此,應該提早處理好 this 指向! /* getChildMsg(data) { console.log('父組件中的方法調用了', data, this) this.setState({ msg: data }) } */ render() { return ( <div className="parent"> <h1>父組件:{this.state.msg}</h1> <Child fn={this.getChildMsg} /> </div> ) } } // 子組件: // 3 子組件中經過 props 接收到父組件中傳遞過來的事件 // 4 子組件中調用傳遞過來的事件, 將數據做爲事件的參數傳遞 const Child = props => { // console.log(props) const handleClick = () => { // 調用 props.fn('撩漢子') } return ( <p className="child"> 這是子組件: <button onClick={handleClick}>發送數據給父組件</button> </p> ) }
// 父組件 // 1 提供狀態 // 2 提供操做狀態的方法 class Parent extends React.Component { state = { msg: '默認值' } updateMsg = data => { this.setState({ msg: data }) } render() { return ( <div className="parent"> 這是父組件: <Child1 msg={this.state.msg} /> <Child2 updateMsg={this.updateMsg} /> </div> ) } } // 子組件1 // 3 接收數據(數據由父組件提供) class Child1 extends React.Component { render() { return <div className="child">這是子組件1:{this.props.msg}</div> } } // 子組件2: // 4 在父組件中傳遞事件給子組件 // 5 給按鈕綁定單擊事件 // 6 調用父組件中的事件來更新數據 class Child2 extends React.Component { // 單擊事件 handleClick = () => { // 調用父組件的事件 this.props.updateMsg('子組件2222222222222222222222') } render() { return ( <div className="child2"> 這是子組件2: <button onClick={this.handleClick}>傳遞數據給 Child1</button> </div> ) } }
分析:由於 CommentList 和 CommentForm 這兩個子組件中,都要用到 評論列表 數據,因此,就利用 狀態提高 的思想,將評論列表數據放在了 父組件Comment 中。this
功能1:渲染評論列表code
// 父組件中渲染子組件: <CommentList list={this.state.list} /> // 子組件中: <ul> {props.list.map(item => ( <li key={item.id}> <h3>評論人:{item.name}</h3> <p>評論內容:{item.content}</p> </li> ))} </ul>
// 父組件中渲染子組件: <CommentForm updateComment={this.updateComment} /> // 子組件中: // 發表評論 addComment = () => { const { name, content } = this.state // ... this.props.updateComment(name, content) // ... }
const { Provider, Consumer } = React.createContext() <Provider value={this.state.msg}> <div className="parent"> 這是父組件: <Child1 /> </div> </Provider> // Child1 -> Child2 -> Child3 // Child3 // data 就是 Provider 中提供的 value <Consumer>{data => <p>接收到的數據爲:{data}</p>}</Consumer>
class Parent extends React.Component{ render(){ return ( <div> <Child>哈哈</Child> <Child>{11}</Child> <Child>{["red","blue","green"]}</Child> </div> ) } } class Child extends React.Component{ render(){ // 獲取children中的值 console.log(this.props.children); return ( <div> 子節點 </div> ) } }
場景:給組件添加 props 校驗,來加強組件的健壯性。orm
1 安裝:yarn add prop-types
對象
2 導入 import PropTypes from 'prop-types'
3 給組件名稱添加 propTypes
屬性,值是一個對象
4 對象的鍵就是要校驗的 props 名稱,值是 PropTypes.array
等,從PropTypes中獲取到的校驗規則
const Parent = () => { ... } // 2 給組件添加 props 校驗 Parent.propTypes = { // 規定 colors 屬性的類型爲:數組(array),若是未來使用組件的時候,傳入的 colors 屬性類型不是 array ,就會經過警告來告訴使用者。 colors: PropTypes.array, gender: PropTypes.oneOf(['male', 'female']).isRequired }
const Parent = () => { ... } // 添加 props 的默認值: Parent.defaultProps = { gender: 'male' }