React中props使用介紹

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

props是組件（包括函數組件和class組件）間的內置屬性，用其可以傳遞數據給子節(jié)點，props用來傳遞參數。組件實例化過程中，你可以向其中傳遞一個參數，這個參數會在實例化過程中被引用

1.繼續(xù)深入state

state有兩種用法：

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

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

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

setState修改數據實現(xiàn)響應式的本質

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

2.props

什么是props？

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

在類組件中:

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

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

沒有循環(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數據，只能由父組件來修改，或者從數據的源頭來修改。

父組件傳遞參數，可以是其他的類型，利用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>