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

클래스 구성 요소

유 구성 요소의 프로포즈는this에 저장됩니다. 이것은 VUE의 프로포즈와 유사하지만, 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')
    )