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

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

React中props使用介紹_React

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

1.繼續(xù)深入state

state有兩種用法：

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

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

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

setState修改數(shù)據(jù)實現(xiàn)響應(yīng)式的本質(zhì)

在每次修改之后，會重新調(diào)用render函數(shù)。

2.props

什么是props？

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

在類組件中:

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

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

沒有循環(huán)的用法：

 <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>

有循環(huán)的用法

  <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數(shù)據(jù)，只能由父組件來修改，或者從數(shù)據(jù)的源頭來修改。

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

父組件傳遞多個數(shù)據(jù){…obj}

對象解構(gòu)還是對象！！！

<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. 子組件限制父組件傳遞的數(shù)據(jù)類型

? b. 引入prop-types庫

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

? d. 設(shè)置默認(rèn)值 defaultProps = {}

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

限制類型的簡寫：可以使用static靜態(tài)方法。

4.函數(shù)接收props參數(shù)

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

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

5.插槽

props下面的Childrene

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

欄目分類
最近更新