条件渲染 REACT 模态组件

Question

我有一个视图模式组件 (ViewModal.js)

import React from 'react'
import { Button, Modal } from 'react-bootstrap';
import './Modal.css';

class ViewModal extends React.Component {

    constructor() {
        super();
        this.state = {
        }
    }

    handleModalShowHide() {
        this.setState({ showHide: !this.state.showHide })
    }

    render() {
        return (
            <div>
                <Button variant="success" onClick={() => this.handleModalShowHide()}>
                    Write a review
                </Button>

                <Modal show={this.state.showHide}>
                    <Modal.Header closeButton onClick={() => this.handleModalShowHide()}>
                        <Modal.Title>Add your review</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        ModalBody
                    </Modal.Body>
                    <Modal.Footer>
                        <Button variant="outline-secondary" onClick={() => this.handleModalShowHide()}>
                            Close
                    </Button>
                        <Button variant="outline-success" onClick={() => this.handleModalShowHide()}>
                            Save Review
                    </Button>
                    </Modal.Footer>
                </Modal>

            </div>
        )
    }

}

export default ViewModal;

我将它导入另一个名为 viewcard.js 的功能组件中 viewcard.js的逻辑如下

import React from 'react';
import ViewModal from './ViewModal';
import Card from 'Card';

function handleClick(){
    console.log('in handle');
 }
const viewcard = () => {
    return ( 
        <p onClick={() => handleClick()}/>
         Some text in paragraph
        </p>
     );
}

export default viewcard;

卡片组件在屏幕上显示一些文本。 我想要实现的是当用户单击该文本时，我想显示模态。

目前如果我在视图卡中渲染模态，通过调用它，它将根据这行逻辑显示一个按钮

                <Button variant="success" onClick={() => this.handleModalShowHide()}>
                    Write a review
                </Button>

我想删除按钮并在用户单击 viewcard.js 中的文本时发生相同的行为

Answer 1

ViewCard 组件：-

import React, {useState} from 'react';
import ViewModal from './ViewModal';
import Card from 'Card';

const ViewCard = () => {
    const [showModal, setShowModal] = useState(false);

    function handleClick(){
       setShowModal(!showModal)
    }

    return ( 
        <Card onClick={() => handleClick()}/>
        {showModal && <ViewModal hideBtn={true} showModal={true} />}
     );
}

export default ViewCard;

ViewModal 组件：

import React from 'react'
import { Button, Modal } from 'react-bootstrap';
import './Modal.css';

class ViewModal extends React.Component {

    constructor() {
        super();
        this.state = {
           showHide: this.props.showModal ? true : false
        }
    }

    handleModalShowHide() {
        this.setState({ showHide: !this.state.showHide })
    }

    render() {
        return (
            <div>
                {this.props.hideBtn ? null : <Button variant="success" onClick={() => this.handleModalShowHide()}>
                    Write a review
                </Button>}

                <Modal show={this.state.showHide}>
                    <Modal.Header closeButton onClick={() => this.handleModalShowHide()}>
                        <Modal.Title>Add your review</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        ModalBody
                    </Modal.Body>
                    <Modal.Footer>
                        <Button variant="outline-secondary" onClick={() => this.handleModalShowHide()}>
                            Close
                    </Button>
                        <Button variant="outline-success" onClick={() => this.handleModalShowHide()}>
                            Save Review
                    </Button>
                    </Modal.Footer>
                </Modal>

            </div>
        )
    }

}

export default ViewModal;

但您应该始终创建一个单独的模态组件。