Question

我的代码

class Box extends Component {


    render () {

        return(
            <div className="box" style={styles.box}>
                <div className="img-container" style={styles}>
                    <img alt="Brand Logo" src={this.props.data.brand_logo} className="img-circle" id="brand_logo" width="50"/>
                </div>
                <ul className="box-basic-info-container">
                    <li>{basic_info_keys[0]} : {basic_info[basic_info_keys[0]]}</li>
                    <li>{basic_info[basic_info_keys[1]]}</li>
                </ul>
                {
                    iconEllipsis
                }
                <div className="box-other-info-container" >
                    <ul className="other_info" style={styles.contactInfo} >
                        {
                            other_info_keys.map(function(item,i){
                                return (<li key={i}>{item}: {other_info[item]}</li>)
                            })
                        }
                    </ul>
                </div>
                {this.renderManagerModal()}
            </div>
        )



    }
    renderManagerModal = () =>{
        return (
                <div>
                    <Modal show={this.state.showModal} onHide={this.close}>
                        <Modal.Header closeButton>
                            <Modal.Title>Managers</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                        </Modal.Body>
                        <Modal.Footer>
                            <Button onClick={this.close}>Close</Button>
                        </Modal.Footer>
                    </Modal>
                </div>
        )



    }
}

我是ES6语法的新手。我在ES5中使用过它。但这不适用于ES6。

this.renderthisManagerModal正在返回一个空div

为什么会这样？如何编写一个返回组件的函数？我不想从不同的文件导入。我想在同一个文件中编写组件。

Answer 1

你可以这样做，但是我鼓励你在反应中使用这些组件。它很干净，你可以确保关注点分离。

我想评论，但我的声誉太低了。告诉我，这有用吗？

 renderManagerModal = () => {
        return (
                <div>
                    Test
                </div>
        )
    }

Answer 2

我认为一个好的方法是将renderManagerModal放在这样的纯组件中：

  //assuming your props are coming from the Box component
  const RenderManagerModal = (props) => {
        return (
                <div>

                    <Modal show={props.showModal} onHide={props.close}>
                        <Modal.Header closeButton>
                            <Modal.Title>Managers</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                        </Modal.Body>
                        <Modal.Footer>
                            <Button onClick={props.close}>Close</Button>
                        </Modal.Footer>
                    </Modal>
                </div>
        )
    }

然后你将该组件放在Box组件中，如下所示：

class Box extends Component {

    showModal(){} 

    close{}

    render () {

        return(
            <div className="box" style={styles.box}>
                <div className="img-container" style={styles}>
                    <img alt="Brand Logo" src={this.props.data.brand_logo} className="img-circle" id="brand_logo" width="50"/>
                </div>
                <ul className="box-basic-info-container">
                    <li>{basic_info_keys[0]} : {basic_info[basic_info_keys[0]]}</li>
                    <li>{basic_info[basic_info_keys[1]]}</li>
                </ul>
                {
                    iconEllipsis
                }
                <div className="box-other-info-container" >
                    <ul className="other_info" style={styles.contactInfo} >
                        {
                            other_info_keys.map(function(item,i){
                                return (<li key={i}>{item}: {other_info[item]}</li>)
                            })
                        }
                    </ul>
                </div>
                <RenderManagerModal showModal={this.showModal} onHide={this.close}/>
            </div>
        )

    }

Answer 3

您在运行renderManagerModal时正在使用箭头功能，因此词法this是renderManagerModal的范围，而不是模式本身。要保留this，您必须使用“旧”函数声明function () {}

ReactJs（ES6）：从函数中渲染组件

3 个答案: