React 的函数组件和类组件中的props

React 的函数组件和类组件中的props

函数组件

函数组件中的props是一个对象直接作为函数的参数传入,在组件内容中可以直接用点语法使用props对象中的属性,代码如下:

function Test1(props) {
        return(
            <div>
                The user is <b>{props.isLoggedIn? 'jack':'not'} </b>logged in.
            </div>
        )
    }
    const element = <Test isLoggedIn={true}/>;
    ReactDOM.render(
        element,
        document.getElementById('app')
    )

类组件

在刘组件中的props存放在this中,这一点和VUE中的props类似,但是Vue可以直接使用this后跟属性名,但是React中还需要this.props后跟相对应的属性名.

class Test extends React.Component{
        render(){
            return(
                <div>
                    The user is <b>{this.props.isLoggedIn? 'jack':'not'} </b>logged in.
                </div>
            )
        }
    }
    const element = <Test isLoggedIn={true}/>;
    ReactDOM.render(
        element,
        document.getElementById('app')
    )