>

새로운 반응을 보였으며이 문제가 발생했습니다 :

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

이처럼 렌더링 할 때 multiple components must wrapt with end 와 같은 오류가 발생합니다.

각 html 태그 또는 각 줄에 대해 하나의 componenet을 만들어야합니까, 아니면 그런 식으로 렌더링 할 수 있습니다.

모든 제안?


  • 답변 # 1

    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 />
        </>
      );
    }
    
    

  • 답변 # 2

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

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

  • 답변 # 3

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

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

  • 답변 # 4

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

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

  • 답변 # 5

    몇 가지 옵션이 있습니다 :

    <올>

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

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

    React

관련 자료

  • 이전 python - 목록 이해에서 왜 그렇지 않은 경우에 앞서 if-else가 필요한가?
  • 다음 asp.net - SignalR, Owin 및 예외 처리