반응에서 요소를 만드는 방법은 무엇입니까

React에서 요소를 생성하는 방법: 1. JSX 구문을 사용하여 "const element =

Hello, world

;"와 같은 구문으로 React 요소를 생성합니다. 2. "React.createElement(type) ,props, children)" 구문을 사용하여 React 요소를 생성합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

React에서 요소를 생성하는 방법은 무엇인가요?

React 요소 생성

React 요소

React 요소(React 요소), React에서 가장 작은 기본 단위입니다. React 요소는 실제로 간단한 JavaScript 객체(일반적으로 가상 DOM이라고 함)입니다. React 요소는 인터페이스의 DOM 부분에 해당하며 DOM의 이 부분의 구조와 렌더링 효과를 설명합니다.

React 요소는 실제 DOM 요소가 아니므로 DOM에서 기본 API를 직접 호출할 수 있는 방법이 없습니다.

렌더링 프로세스: 요소 설명 가상 DOM에 반응한 다음 가상 DOM을 기반으로 실제 DOM을 렌더링합니다.

• Virtual DOM: js 객체 구조를 사용하여 html의 dom 구조를 시뮬레이션합니다. 일괄 추가, 삭제, 수정 및 쿼리의 경우 js 객체가 먼저 직접 조작되고 최종적으로 실제 DOM 트리로 업데이트됩니다. js 객체를 직접 조작하는 것이 DOM을 조작하는 API보다 빠르기 때문입니다.
• React 요소는 페이지에 표시하려는 내용을 React에게 알려주는 js 객체입니다.

일반적으로:

요소는 DOM 노드 또는 React 구성 요소를 설명하는 데 사용되는 순수 객체입니다. 요소는 자체 속성 내에 다른 요소를 포함할 수 있습니다. 요소를 만드는 데 드는 비용은 매우 낮습니다. 요소를 만든 후에는 변경되지 않습니다.

예: JSX 구문을 사용하여 React 요소 요소를 생성합니다

const element = <h1 id="Hello-world">Hello, world</h1>;

컴파일 프로세스 중에 JSX는 React.createElement()에 대한 호출로 컴파일됩니다. 위 예제의 컴파일된 결과는 다음과 같습니다.

const element = React.createElement(
    'h1',
    {className: 'greeting'},
    'Hello, world!'
);

마지막으로. , 요소 값은 다음

const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello, world'
    }，
    _context: Object,
    _owner: null,
    key: null,  
    ref: null, 
}

React 요소를 생성하는 방법

1과 유사한 js 객체로 컴파일됩니다. JSX 구문

const element = <h1 id="Hello-world">Hello, world</h1>;

2.React.createElement(type,props,children)을 사용하세요. )

구문 매개변수 설명

type: h1, div, p 등과 같은 요소 유형을 나타냅니다.

• 문자열(예: div, p, h1...)일 수 있습니다.

• 구성 요소(사용자 정의 구성 요소: 생성자에 의해 생성된 구성 요소 또는 클래스에 의해 생성된 구성 요소) ; react 기본 구성 요소: React.Fragment 등) 自定义组件：构造函数创建的组件或class创建的组件；react 原生组件：React.Fragment等）

props：表示该元素上的属性，使用 JavaScript 对象的方式表示

children：表示该元素内部的内容，可以是文字，也可以继续嵌套另一个React.createElement(type,props,children)。

其中 children 可以是一个 React.createElement 列表

props: JavaScript 개체를 사용하여 표현된 요소의 속성을 나타냅니다.

children: 요소 내부의 콘텐츠를 나타냅니다. 텍스트이거나 다른 React.createElement(type,props,children)를 계속 중첩할 수 있습니다. 자식은 React.createElement 목록이거나 여러 매개변수로 작성될 수 있습니다.

  <script>
    const child1 = React.createElement("li",null,"one");
    const child2 = React.createElement("li",null,"two");
    const content = React.createElement("ul",{className:"testStyle"},[child1,child2]);

    ReactDOM.render(
        content,
        document.getElementById("example")
    );
    //或者
    const child1 = React.createElement("li",null,"one");
    const child2 = React.createElement("li",null,"two");
    const content = React.createElement("ul",{className:"testStyle"},child1,child2);

    ReactDOM.render(
        content,
        document.getElementById("example")
    ); 
  </script>

🎜🎜🎜React.createElement는 인스턴스 객체 속성을 반환합니다.🎜

const div = React.createElement('div', { id: 'box'}, 'test');console.log(div)

추천 학습: "🎜react 비디오 튜토리얼🎜 " 🎜

위 내용은 반응에서 요소를 만드는 방법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!