React 어플리케이션에서 Bootstrap 4 popover를 어떻게 초기화합니까?

Question

팝업을 만드는 방법을 알아낼 수 없습니다 : https://getbootstrap.com/docs/4.0/components/popovers/.

팝 오버 지원은 플러그인 인뿐만 아니라 툴팁 플러그인을 필요로하는, 그래서 그 두 가지를 추가 내 webpack.config.js을 수정 한에 대한 문서 회담

은, 지금은 다음과 같습니다

... 
new webpack.ProvidePlugin({ 
    $: 'jquery', 
    jQuery: 'jquery', 
    'window.jQuery': 'jquery', 
    Popper: ['popper.js', 'default'], 
    Popover: 'exports-loader?Popover!bootstrap/js/dist/popover', 
    Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip", 
}), 
... 

나는 천국 ' 부트 스트랩 플러그인 개념에 관한 문서를 찾지 못했기 때문에 위의 두 줄은 Popover과 Tooltip에 대한 것으로, 정확한지 확실하지 않습니다.

문서 상태 :

Popovers는 선택 하에서 성능상의 이유로, 그래서 당신은 그들에게 자신을 초기화해야합니다.

하지만 그 방법을 이해하지 못합니다. 호출 내 요소에 더 popover() 기능은 없다 - -이 작업을 수행하는 방법을

$(function() { 
    $('.example-popover').popover({ 
    container: 'body' 
    }) 
}) 

그러나 나는이 일을해야하는데 무엇을 이해하지 않습니다

문서는 팝 오버를 초기화하는 다음 코드를 보여줍니다?

render(){ 

    ... 

    <span> 
    Summary info 
    <button 
     type="button" className="btn btn-sm" 
     data-toggle="popover" title="Popover title" 
     data-content="The popover Content" 
    > 
     Show popover 
    </button>   
    </span> 

    ... 
} 

가 어떻게이 반작용 응용 프로그램의 맥락에서 부트 스트랩 V4 팝 오버 기능이 작동해야합니까 :

여기에 팝 오버를 사용하려고 내 코드의 예? 특히 - popover를 "초기화"하는 방법은 무엇입니까? 내가 타이프 라이터 2.3을 사용하고

---

16, 부트 스트랩 4 (아무 반응 - 부트 스트랩 스타일 라이브러리) 반작용하지 않습니다.

반응 부트 스트랩은 부트 스트랩 V3 만 지원하며 반응 스트랩은 너무 불안정하므로 사용하고 싶지 않습니다.

Answer 1

있을 것입니다 내가 처음 작업 부트 스트랩 popovers을 얻으려고 노력했다 문맥 이해를 누락 많이 (여전히 의심의 여지없이,이).

우선, 부트 스트랩 "Popover"플러그인은 실제로는 JQuery plugin입니다. 나는 그것이 모든 부트 스트랩 플러그인이 작동하는 방법이라고 생각하지만, 이것에 대한 어떤 부트 스트랩 소개 문서도 찾을 수 없었다. 그래서 이것은 popover() 메쏘드와 그것이 어디서 왔는지를 설명합니다.

아래에서는 필자가 React/Typescript/Webpack 스택의 컨텍스트에서 작동하도록하기 위해 필요한 내용을 간략히 설명했습니다.

다음은 웹 팩을 the Bootstrap doco으로 설정했다고 가정합니다.

webpack.config.js이 부트 스트랩 문서와 같고 코드베이스 어딘가에 import 'bootstrap';이 있다고 가정하면 원래 질문의 "Popover"및 "Tooltip"줄이 필요하지 않습니다. 당신은 그래서 JQuery와의 type 정의를 확장해야

"devDependencies": { 
    "@types/jquery": "3.2.15", 
    ... 
} 

"dependencies": { 
    "bootstrap": "4.0.0-beta", 
    "jquery": "3.2.1", 
    "popper.js": "1.11.0", 
    ... 
} 

: 당신이 $을 가져 오른쪽 유형을 가질 수 있도록

---

당신은, 만약 이미 존재하지를 JQuery와 typings를 추가해야 그것은 this blog article by Netanel Basal에 따라 Popover 플러그인에 대해 알고 있습니다. 에서 typings.d.ts (또는 프로젝트에서 의미가 곳), 다음 추가 :

// support for JQuery popover plugin from Bootstrap 4 
interface JQuery { 
    popover() : any; 
} 

참고 그 정의는 당신이 정적으로 입력 된 방식으로 코드에서 작업 popovers를 얻기 위해 필요한 최소한입니다. Popover 비헤이비어를 사용자 정의 할 수 있도록 전달 매개 변수를 지원하려면 확장해야합니다. 또는 data 속성을 사용하여 doco의 Live example에 따라 이러한 매개 변수를 전달할 수 있습니다.

React 구성 요소 자체에서 질문에서 popover를 선언하는 JSX가 정상적으로 작동하는 것 같습니다.

질문에 따라, 당신은 팝 오버 방법 JQuery와 식별자를 가져온 다음 호출 할 필요는 팝 오버를 "초기화"다음

이

... 
const $ = require('jquery'); 
... 
componentDidMount(): void{ 
    $('[data-toggle="popover"]').popover(); 
} 
... 

은 "수입 형태"didn't work for me, 그래서 require()로했다 그것을 .

그 코드는 data-toggle="popover"을 가진 요소에 대한 전체 HTML 페이지를 검색하고, 당신이 호출 할 수있는 popover() 방법 (즉, 전체 jQuery 플러그인의 부분)이있는 JQuery와 개체를 반환합니다.

팝업 속성이있는 요소에 popover()이 호출되면 요소를 클릭 할 때 popover가 자동으로 표시됩니다 (Popover 관련 React 상태를 관리 할 필요가 없음).

---

그것은 위 그림과 같이 모든 popovers에 대한 전체 HTML 페이지를 검색하는 좋은 생각이 아니다 EDIT. 여러 React 구성 요소에 여러 개의 팝업이있는 복잡한 페이지에서는 각 구성 요소가 서로 popover() 옵션을 덮어 쓰게됩니다.

다음은 재사용 가능한 React 부트 스트랩 Popover 구성 요소에 대한 현재 해결책입니다.

이해하기 위해 타이프 라이터의 typings를 확장 더 popover options :

// support for JQuery popover plugin from Bootstrap 4 
interface JQuery { 
    popover(options?: PopoverOptions) : any; 
} 

interface PopoverOptions { 
    container?: string | Element | boolean; 
    content?: string | Element | Function; 
    placement?: "auto" | "top" | "bottom" | "left" | "right" | Function; 
    title?: string | Element | Function; 
    ... 
} 

만들기 Popover.tsx 같은 : 팝 오버의 위치와 관련

<Popover 
    popoverTitle="The popover title" 
    popoverContent="The popover content" 
> 
    <span> 
    Click this to show popover. 
    </span> 
</Popover> 

주의 문제 :

export interface PopoverProps { 
    popoverTitle: string | Element | Function; 
    popoverContent: string | Element | Function; 
} 

export class Popover 
extends PureComponent<PopoverProps, object> { 

    selfRef: HTMLSpanElement; 

    componentDidMount(): void{ 
    $(this.selfRef).popover({ 
     container: this.selfRef, 
     placement: "auto", 
     title: this.props.popoverTitle, 
     content: this.props.popoverContent, 
    }); 
    } 

    render(){ 
    return <span 
     ref={(ref)=>{if(ref) this.selfRef = ref}} 
     data-toggle="popover" 
    > 
     {this.props.children} 
    </span>; 

    } 
} 

그런 다음 같은 팝 오버를 사용 동적 콘텐츠 포함 : Bootstrap 4 - how does automatic Popover re-positioning work?

Answer 2

설명서에서 단순히 data-toggle = "popover"가있는 요소를 사용한다고해서 popover 인스턴스가 생성되지 않는다고 말하고 있습니다. 명시 적으로 javascript 호출로 초기화해야합니다. 비 반응 환경에서

, 당신은 당신이 당신의 객체의 생성자 코드에 추가해야합니다,이

$(document).ready(function() { 
    $('.myPopoverItem').popover({ 
     html: true 
     , trigger: 'focus' 
     , content: $.proxy(this.getContent, this) 
    }); 
} 

에서 비록 반작용처럼 예를 들어, 문서 준비 함수에 추가 할 수 있습니다 render() 후에 호출됩니다 (요소는 페이지에 있어야합니다).

이 잠재적 인 답변을 찾았습니다 : React "after render" code? 여기서 popover 초기화를 호출 할 수있는 componentDidMount 기능을 권장합니다.

그래서 당신의 반작용 객체, 당신은 내가 가진 함수

componentDidMount() { 
    $('.myPopoverItem').popover({ 
     html: true 
     , trigger: 'focus' 
     , content: $.proxy(this.getContent, this) 
    }); 
}