이 예제는 어떻게 작동합니까?

저는 현재 React를 배우려고하고 있습니다. 어쩌면 나는 잠을 자고 뭔가를 놓친 것일 수도 있습니다. 그러나이 예제는 어떻게 작동합니까?

이 코드 예제 (React의 "Getting Started"페이지)에서 왜 "World "인쇄? this.props.name이 전달 된 곳에서 함수는 자식을 찾고 추가 텍스트 입력을 선택하지 않습니다. 적어도 필자는 Re : React.createElement를 어떻게 해석 할 것인가.

이 코드는 "의도 한대로 작동합니다", "Hello World"를 인쇄하지만 아무도 정확하게 말할 수 있습니까? 왜이 작동합니까? 나는 "Hello"와 "World"에 대한 콘솔 오류가 정의되지 않았 음을 알기를 기대합니다. 누구든지 답장을 해 주시면 미리 설명해 주셔서 감사합니다. ;)

var Hello = React.createClass({ 
displayName: 'Hello', 
render: function() { 
    return React.createElement("div", null, "Hello ", this.props.name); 
} 
}); 

ReactDOM.render(
React.createElement(Hello, { name: "World"}), 
container 
);

출처

2016-06-27 BetweenTheLines

render 메소드의'{name : "World"}'객체는 구성 요소를 만들 때 매개 변수로 설정 한'this.props.name'의 정의입니다. –

가 React.createElement 기능에 요소의 유형을 소요 - null
두 아이 생성됩니다 (문자열이 전달 된 경우 HTML 요소 이름이지만 다시 사용할 수도 있습니다). flence to ReactClass), props 개체, 그 다음에 결정되지 않은 숫자의 자식을 다음 인수로 사용합니다.

당신은 당신이 반작용 클래스로 Hello을 전달하는

React.createElement(Hello, { name: "World"})

가 인스턴스화 될 호출 할 때 render 방법을 포함 Hello의 모든 방법에 this.props으로 다음 사용할 수있는 객체입니다 props로 { name: "World"}, .,

여기

React.createElement("div", null, "Hello ", this.props.name)

, "div"가 props가 null이며, 생성하는 HTML 요소의 유형이며, 모두 "Hello " 및 this.props.name 생성되는 아이들은 다음과 같습니다

그런 다음 Hello 요소 (클래스) 다시 createElement를 호출 첫 번째 문자열은 리터럴 문자열이고, 두 번째 문자열은 위에 전달 된 props 개체의 키에 대한 참조입니다.

그래서 놓친 부분은 createElement 메서드에 여러 개의 인수를 전달할 수 있으며 3 번째로 시작하는 모든 인수는 형제 요소로 렌더링됩니다.

출처

2016-06-27 13:37:37 pawel

당신이 볼 수 있듯이, 렌더링 함수 내에서의 createElement 함수에 전달 추가 매개 변수가 있습니다.

첫 번째 매개 변수는 인스턴스화하려는 구성 요소 클래스이고 두 번째 매개 변수는 소품입니다. 여기에 name 소품이 "World" 값으로 정의되어 있습니다.

Hello 구성 요소는 name이라는 소품을 채택하므로 구성 요소에 포함하라는 내용의 "Hello "과 함께 렌더링됩니다. 간단한 div 요소입니다.

Here you can seecreateElement에 대해 정의되고 설명 된 매개 변수는 React exposures 기능을 나타냅니다. 즉

React.createElement("div", null, "Hello ", this.props.name);

요소 유형 - div
소품 - ("World"입니다) "Hello " 및 this.props.name

출처

2016-06-27 13:28:41

이 예제는 어떻게 작동합니까?

답변

관련 문제