React Bootstrap 테이블에는 모달을 만들 때 각 행에 버튼이 있지만 한 버튼은 모달의 렌더링을 여러 번 호출합니다

Question

저는 React Bootstrap Table입니다. 테이블의 각 페이지에는 20 개의 레코드가 있습니다. 각 행에서, I는

function attachFormatter(cell, row){ 
    return (
     <AttachmentManager /> 
    ); 
} 
<TableHeaderColumn key={uuid.v4()} 
        dataField={column.dataField} 
        dataFormat={attachFormatter} 
        hidden={hide}> 
        {column.label} 
</TableHeaderColumn> 

그럼 I이 페이지 20 개 버튼이 있고, 각 행은 하나 개의 버튼이 다음 줄을 사용하여 버튼을 추가했다. 단추 중 하나를 클릭하면 모달을 열려고했습니다. 그러나 하나의 버튼을 클릭하면 openModal()이 예상대로 실행되지만 의 render() 기능은 20 번 실행됩니다. 어떻게 해결할 수 있을까요?

export default class AttachmentManager extends React.Component { 
    constructor (props) { 
     super(props); 
     this.state = {showModal: false}; 
    } 

    openModal() { 
     alert('test'); 
    } 

    render() { 
     return (
     <button onClick={this.openModal.bind(this)} className="btn btn-default">Add Projects 
     <AttachmentModal show={this.state.showModal}/> 
     </button> 
     ); 
    } 
} 

그리고 다음은 내 모달

import React from 'react'; 
import SimpleModal from '../common/SimpleModal'; 
export default class AttachmentModal extends React.Component { 

    constructor (props) { 
     super(props); 
    } 

    render() { 
     return (
      <SimpleModal showModal={this.props.show} 
         onToggleModal={this.props.onHide} 
         title={this.props.title} 
         onCancelClick={this.props.onHide} 
         onPrimaryButtonClick={this.props.onPrimaryButtonClick} 
         cancelText="Cancel" 
         primaryButtonText={this.props.primaryButtonText} 
         loading={this.props.loading} 
         backdrop='static' 
         bsStyle={this.props.bsStyle}> 
       {this.props.children} 
      </SimpleModal> 
     ); 
    } 
} 

Answer 1

나는 이와 비슷한 문제에 직면하고있다.

는 attachFormatter에서 SET 버튼 selectedRow 및 showModal 값의 클릭시, 소품 AttachmentManager에서

function attachFormatter(cell, row){ 
    return (
     <AttachmentManager row={row} /> 
    ); 
} 
<TableHeaderColumn key={uuid.v4()} 
        dataField={column.dataField} 
        dataFormat={attachFormatter} 
        hidden={hide}> 
        {column.label} 
</TableHeaderColumn> 

로 row 값을 전달한다. isObjectEquivalent 함수를 사용하여 row props 및 selectedRow 값을 비교할 수 있습니다.

export default class AttachmentManager extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
    showModal: false, 
    selectedRow: null 
    }; 
    } 

    openModal() { 
    this.setState((prevState, props) => { 
    return { 
    selectedRow: props.row, 
    showModal: true 
    } 
    }); 
    } 

    isObjectEquivalent(a, b) { 
    // Create arrays of property names 
    var aProps = Object.getOwnPropertyNames(a); 
    var bProps = Object.getOwnPropertyNames(b); 

    // If number of properties is different, 
    // objects are not equivalent 
    if (aProps.length != bProps.length) { 
    return false; 
    } 

    for (var i = 0; i < aProps.length; i++) { 
    var propName = aProps[i]; 

    // If values of same property are not equal, 
    // objects are not equivalent 
    if (a[propName] !== b[propName]) { 
    return false; 
    } 
    } 

    // If we made it this far, objects 
    // are considered equivalent 
    return true; 
    } 

    render() { 
    return ( 
    <div> 
     <button onClick = {this.openModal.bind(this)} className = "btn btn-default"> Add Projects </button> 
     {this.state.showModal && this.isObjectEquivalent(this.props.row, this.state.selectedRow) ? (< AttachmentModal show = {this.state.showModal} />) : null} 
    </div> 
    ); 
    } 
    } 

희망이 도움이됩니다.

Answer 2

변경하려면 PureComponent로 구성 요소입니다.

export default class AttachmentManager extends React.PureComponent { 
... 
} 

모든 버튼에 키를 추가하십시오.

<button key={uuid.v4()} onClick={this.openModal.bind(this)} className="btn btn-default">Add Projects 
     <AttachmentModal show={this.state.showModal}/> 
     </button>