日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React中props使用介紹_React

作者：神也佑我YK ? 更新時間： 2023-01-23 編程語言

1.繼續深入state

state有兩種用法：

setState({}) 和 setState(()=>{})

第一種用法本質是：我寫了這個屬性，然后進行覆蓋操作。

第二種用法好處是：回調函數中的第一個參數是state。這樣的話看起來獲取到原先state上的數據也更加簡單！

setState修改數據實現響應式的本質

在每次修改之后，會重新調用render函數。

2.props

什么是props？

? props 是組件傳遞的參數。子組件通過this.props來接受！

在類組件中:

props通過子組件的this.props來接受父組件傳過來的props值。

組件是可以復用的，最常見的就是循環來使用。與Vue不同的是：React他沒有指令這一說法。jsx語法會自動循環數組。通常處理數組都采用高階函數。例如

沒有循環的用法：

 <div class="box1"></div>
    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
    <script type="text/babel">
        // 子組件
        class Info extends React.Component {
            render() {
                const { name, age, sex } = this.props
                return <div>
                    <h2>子組件Child</h2>
                    <div>姓名: {name}</div>
                    <div>年齡: {age}</div>
                    <div>性別: {sex}</div>
                </div>
            }
        }
        // 父組件
        class Demo extends React.Component {
            state = {
                arr: [
                    {
                        name: '北幕',
                        age: 18,
                        sex: "man"
                    },
                    {
                        name: '北幕',
                        age: 18,
                        sex: "man"
                    },
                    {
                        name: '北幕',
                        age: 18,
                        sex: "man"
                    }
                ]
            }
            render() {
                return (
                    <div>
                        <h1>我是Demo組件</h1>
                        <hr />
                        <Info name="耀陽" age="18" sex="男"></Info>
                        <Info name="呂德華" age="18" sex="男"></Info>
                        <Info name="北幕" age="18" sex="男"></Info>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo></Demo>, document.querySelector('.box1'))
    </script>

有循環的用法

  <div class="box1"></div>
    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
    <script type="text/babel">
        // 子組件
        class Info extends React.Component {
            render() {
                const { name, age, sex } = this.props
                return <div>
                    <h2>子組件Child</h2>
                    <div>姓名: {name}</div>
                    <div>年齡: {age}</div>
                    <div>性別: {sex}</div>
                </div>
            }
        }
        // 父組件
        class Demo extends React.Component {
            state = {
                arr: [
                    {
                        name: '北幕',
                        age: 18,
                        sex: "man"
                    },
                    {
                        name: '北幕',
                        age: 18,
                        sex: "man"
                    },
                    {
                        name: '北幕',
                        age: 18,
                        sex: "man"
                    }
                ]
            }
            render() {
                return (
                    <div>
                        <h1>我是Demo組件</h1>
                        <hr />
                        {
                            this.state.arr.map(item => <Info name={item.name} age={item.age} sex={item.sex} ></Info>)
                        }
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo></Demo>, document.querySelector('.box1'))
    </script>

Props幾個特點：

子組件不能修改傳遞的Props數據，只能由父組件來修改，或者從數據的源頭來修改。

父組件傳遞參數，可以是其他的類型，利用jsx語法：{},跟vue的插值語法類似：都是js表達式！

父組件傳遞多個數據{…obj}

對象解構還是對象！！！

<div class="box1"></div>
    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
    <script type="text/babel">
        // 子組件
        class Info extends React.Component {
            render() {
                const { name, age, sex } = this.props
                return <div>
                    <h2>子組件Child</h2>
                    <div>姓名: {name}</div>
                    <div>年齡: {age}</div>
                    <div>性別: {sex}</div>
                </div>
            }
        }
        // 父組件
        class Demo extends React.Component {
            state = {
                obj: {
                    name: "耀陽1", age: "18", sex: "男"
                }
            }
            render() {
                return (
                    <div>
                        <h1>我是Demo組件</h1>
                        <hr />
                        <Info {...this.state.obj}></Info>
                        <Info name="呂德華" age="18" sex="男"></Info>
                        <Info name="北幕" age="18" sex="男"></Info>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo></Demo>, document.querySelector('.box1'))
    </script>

3.限制Props的傳遞類型

子組件接收父組件的類型,父組件可以隨意的定義,

? a. 子組件限制父組件傳遞的數據類型

? b. 引入prop-types庫

? c. 需要在類上設置一個屬性 propTypes，誰想限制給誰設置。寫在類上面方法(靜態方法)

? d. 設置默認值 defaultProps = {}

這個不需要記住，用的時候查閱即可！

限制類型的簡寫：可以使用static靜態方法。

4.函數接收props參數

函數中的state在hook中才能使用。暫時先不考慮。

函數的第一個參數就是props，在函數中只需要用第一個參數來接受即可

5.插槽

props下面的Childrene

原文鏈接：https://blog.csdn.net/qq_62860882/article/details/128341668

欄目分類
最近更新