Question

我正在尝试显示嵌套在React模态组件中的标准HTML内容。我以为在组件中使用{this.props.children}可以显示嵌套的HTML，但是在打开时该段落不会出现在模式中。我想将内容保留在HTML文件中，而不放在React组件中。

问题的密码笔是here。

HTML：

<div id="testModal">
    <p>Content to be displayed within modal</p>
</div>

JS：

class Modal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isModalOpen: false
        };
        // bind functions
        this.closeModal = this.closeModal.bind(this);
        this.openModal = this.openModal.bind(this);
    }

    // close modal
    closeModal() {
        this.setState({isModalOpen: false});
    }

    // open modal
    openModal() {
        this.setState({isModalOpen: true});
    }

    render() {
        return (
            <React.Fragment>
                <div className="link" onClick={this.openModal}>Click Me</div>
                <div id="modal" className="modal__outter" style={{
                        display: this.state.isModalOpen
                            ? 'block'
                            : 'none'
                    }}>
                    <div className="modal__overlay" onClick={this.closeModal}></div>
                    <div onClick={this.state.closeModal}></div>
                    <div className="modal__container">
                        <div className="modal__header">
                          <button onClick={this.closeModal} className="link">X</button>
                        </div>
                        <div className="modal__content">
                            {this.props.children}
                        </div>
                        <div className="modal__footer">
                            <button className="link" onClick={this.closeModal}>Close</button>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        );
    }
}


ReactDOM.render(
    <Modal />,
    document.getElementById('testModal')
);

Answer 1

this.props.children是指从您的React代码而不是HTML文件传入的组件。

因此在ReacDOM.render中传递模式内容

ReactDOM.render(
    <Modal>
     <p>Content to be displayed within modal</p>
  </Modal>,
    document.getElementById('testModal')
);

这是分叉的CodePen。

回答is there a way to pass the content in from the HTML file

是的，可以，但是您仍然需要以某种方式传递内容。

我已经使用document.getElementById来获取模态内容，并将其作为孩子传递给<Modal>。
（如果您打算使用this.props.children，就是这样。否则，您可以使用document.get/querySelect...从HTML中获取内容）

这是更新后的CodePen。

如何使用{this.props.children}显示嵌套的HTML内容？

1 个答案: