reactjs - Reactrender () 내부에 여러 요소를 반환

Reactrender  메소드는 단일 루트 노드 만 렌더링 할 수 있습니다. (업데이트 :v16에서 변경되었습니다 (아래 참조)). 귀하의 경우에는 3 개의 노드를 반환합니다. 이 문제를 해결하려면 3 개의 노드를 단일 루트 노드로 래핑 할 수 있습니다.

render: function(){
  return (
    <div>
      <h3>Account</h3>
      <a href="#" onClick={some_event}>Login</a>
      <a href="#" onClick={some_event}>Logout</a>
    </div>
)}

React v16에서는 render() 가 가능합니다.  요소 배열을 반환합니다.

다른 배열과 마찬가지로 주요 경고를 피하려면 각 요소에 키를 추가해야합니다.

render() {
  return [
    <ChildA key="key1" />,
    <ChildB key="key2" />,
    <ChildC key="key3" />,
  ];
}

또 다른 옵션은 조각을 사용하는 것입니다. 조각을 사용하면 DOM에 추가 노드를 추가하지 않고도 하위 목록을 그룹화 할 수 있습니다.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

짧은 문법도 있습니다 ( <> ) 조각 선언 :

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

쉼표로 구분 된 요소 배열을 반환합니다.

render: function(){
  return ([
    <h3>Account</h3>,
    <a href="#" onClick={some_event}>Login</a>,
    <a href="#" onClick={some_event}>Logout</a>
  ])
}

React 16.2+의 조각에 다음 구문을 사용할 수 있습니다 :

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

React.render는 DOM 요소를 반환하는 JavaScript 함수입니다. JavaScript에서 함수는 여러 표현식을 리턴 할 수 없으므로 React에서 여러 요소를 리턴 할 수 없습니다. 이 함수는 "return"키워드 바로 다음에 첫 번째 표현식을 반환 한 다음 함수가 종료됩니다. 이것이 우리가 이것을 할 수있는 이유입니다 :

if (1) {   1을 반환 } return 2

몇 가지 옵션이 있습니다 :

<올>

어떤 <div></div> 에 그것을 마무리  또는 <section></section> . 와이즈 비즈  단일 요소를 반환해야합니다.

분할 할 수 있고 render() 에서 더 잘되고 좋은 전용 로직을 구현하는 여러 구성 요소를 가질 수 있습니다.

React