快捷導(dǎo)航

React中props使用介紹

更新時(shí)間：2022年12月21日 11:55:39 作者：神也佑我YK

props是組件（包括函數(shù)組件和class組件）間的內(nèi)置屬性，用其可以傳遞數(shù)據(jù)給子節(jié)點(diǎn)，props用來(lái)傳遞參數(shù)。組件實(shí)例化過(guò)程中，你可以向其中傳遞一個(gè)參數(shù)，這個(gè)參數(shù)會(huì)在實(shí)例化過(guò)程中被引用

1.繼續(xù)深入state

state有兩種用法：

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

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

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

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

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

2.props

什么是props？

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

在類組件中:

props通過(guò)子組件的this.props來(lái)接受父組件傳過(guò)來(lái)的props值。

組件是可以復(fù)用的，最常見的就是循環(huán)來(lái)使用。與Vue不同的是：React他沒有指令這一說(shuō)法。jsx語(yǔ)法會(huì)自動(dòng)循環(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="耀陽(yáng)" 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幾個(gè)特點(diǎn)：

子組件不能修改傳遞的Props數(shù)據(jù)，只能由父組件來(lái)修改，或者從數(shù)據(jù)的源頭來(lái)修改。

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

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

對(duì)象解構(gòu)還是對(duì)象?。?！

<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: "耀陽(yáng)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>