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

我的代码

我不熟悉ES6语法。 我在ES5中使用过这个。 但这在ES6中不起作用

this.renderHismanager正在返回一个空div

为什么会这样？ 如何编写返回组件的函数？ 我不想从其他文件导入。

---

我想在同一个文件中编写组件。

您可以这样做，但是我鼓励您使用react中的组件。它是干净的，你可以确保有一个分离的关注点

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

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

---

我认为一个很好的方法是将RenderManager模式放在纯组件中，如下所示：

  //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>
        )
    }

然后将该组件放入框组件中，如下所示：

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>
        )

    }

---

运行RenderManager模式时使用的是arrow函数，因此词法范围是RenderManager模式的范围，而不是模式本身。要保持这一点，您必须使用旧的函数声明函数{}

您的状态定义在哪里？我看到你的模态的外观取决于这个.state.showmodel。您在哪里定义和更新它？它已定义。我的问题是，当我在控制台中看到模式时，它没有显示在DOM结构中。如果在RenderManager模式方法中只呈现一些普通html，会发生什么？如果它有效，那么它是关于模态组件的，而不是框组件。

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>
        )

    }