Jsx를 사용하는 경우 Vuejs 2.x에서 fragment를 사용하는 방법

Jsx를 사용하는 경우 Vuejs 2.x에서 fragment를 사용하는 방법

이 때문에 React는 fragments를 가지고 있으며 공식 github 스레드도 이와 같은 솔루션을 제공하지 않습니다.

Vuejs에서는 이 문제를 어떻게 해결할 수 있을까요?이는 개발자가 React 백그라운드에서 Vuejs로 마이그레이션하는 데 도움이 될 수 있습니다. 즉, 렌더링 기능 스타일과 JSX를 선호하는 사람은 누구입니까?

이것은 컴포넌트의 루트 요소에 대해 실행하지 않는 한 간단합니다.예를 들어 서브렌더 함수에서 반환되는 여러 노드를 가진 루트 div가 이미 있다고 가정합니다.

이전에는 React에서 렌더 함수를 분할했으므로 여기서도 같은 방법으로 작업을 수행할 수 있습니다.

솔루션:

여기 코드가 있습니다.

render(h) {
    return (
      <div>
        {this.isConfirm ? this.renderF1(h) : this.renderF2(h)}
      </div>
    );
},
methods: {
    //eslint-disable-next-line
    renderF1: function(h){
        return [
            <div></div>,
            <div class='anotherDiv'></div>
        ]
    },
    //eslint-disable-next-line
    renderF2: function(h){
        return [
            <span></span>,
            <div class='secondDiv'></div>
        ]
    }
}

설명:

첫 번째 단계는 여러 루트 노드 요소를 반환하는 것입니다.array

return [node, node];

다음으로 Vue CLI에서 다음 에러가 발생합니다.function h, 당신의 메인으로 부터renderh다른 작은 렌더링 함수에 대한 인수로 사용됩니다.

이 코드가 실행된 후.

주의 - 다음과 같은 경우eslint 그냥 이 줄을 될 것

//eslint-disable-next-line

컴파일 오류를 방지하기 위해 각 렌더 함수 위에 있습니다.

또한 Vuejs의 JSX 랜드에 처음 오시는 분들은 공식 Babel 플러그인 패키지를 사용하였습니다.

따라서 컴포넌트 계층에 대해 어떤 방식으로든 작업을 수행할 수 있다면 최소한 작업해야 할 사항이 있습니다.어레이를 루트 요소로 반환하면 오류가 발생합니다.

예를 들어, 만약 우리가

render(h) {

 return [
      <div>
        {this.isConfirm ? this.renderF1(h) : this.renderF2(h)}
      </div>
    ];
},

Vue가 이걸 틀렸어

Multiple root nodes returned from render function. Render function should return a single root node.

언급URL : https://stackoverflow.com/questions/52758165/how-to-use-fragments-in-vuejs-2-x-if-using-jsx