内模态React

Question

我有类似的问题，How to use Bootstrap Modal inside map function in React Js to render indivisual elements? 但是答案在我的代码中不起作用，或者我没有正确实现。我知道映射到方法中的方法仅针对列表的最后一个元素，但是我该怎么做才能从map中的toogleConfirmation正确数据中传输？有提示吗？

它是我的ModalComponent.jsx

import { AppState, AppStateStatus } from 'react-native';
...

componentDidMount() {
  AppState.addEventListener('change', this.onAppStateChange);
}

componentWillUnmount() {
  AppState.removeEventListener('change', this.onAppStateChange);
}

onAppStateChange(state) {
  if (state === 'active') {
    // Add code to check your wallet here
  }
}

和渲染方法中的表格

export const ModalHeader = props => {
    return <div className="modal-header">{props.children}</div>;
};

export const ModalBody = props => {
    return <div className="modal-body">{props.children}</div>;
};

export const ModalFooter = props => {
    return <div className="modal-footer">{props.children}</div>;
};

class ModalComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modalShow: '',
            display: 'none'
        };
        this.openModal = this.openModal.bind(this);
        this.closeModal = this.closeModal.bind(this);
    }

    openModal() {
        this.setState({
            modalShow: 'show',
            display: 'block'
        });
    }

    closeModal() {
        this.setState({
            modalShow: '',
            display: 'none'
        });
    }

    componentDidMount() {
        this.props.isOpen ? this.openModal() : this.closeModal();
    }

    componentDidUpdate(prevProps) {
        if (prevProps.isOpen !== this.props.isOpen) {
            this.props.isOpen ? this.openModal() : this.closeModal();
        }
    }

    render() {
        return (
            <div
                className={'modal fade ' + this.state.modalShow}
                tabIndex="-1"
                role="dialog"
                aria-hidden="true"
                style={{ display: this.state.display }}
            >
                <div className="modal-dialog" role="document">
                    <div className="modal-content">{this.props.children}</div>
                </div>
            </div>
        );
    }
}

export default ModalComponent;

Answer 1

在Data.js中仅将集合作为props传递给ModalBody，ModalHeader和ModalFooter

<ModalBody collection={collection}/>

您可以像这样更新ModalBody，ModalHeader和ModalFooter：

export const ModalBody = props => {
    return (<div className="modal-body">
                <p>Are you sure to proceed with this action with {props.collection.name} </p>
            </div>);
};