可以通过另一个组件中的 onClick 侦听器调用 React JS class 吗？

Question

我有这样的代码：

import React from "react";
import Overlay from "./Overlay";

export default class TagListItem extends React.Component {

    render() {
        return(
            <div className={'tag'} onClick={() => <Overlay data={this.props}/>}>
                {this.props.tag}
            </div>
        )
    }
}

使用断点我已经能够确定 onClick 事件触发，但我的覆盖 class 没有被触发（点击 'tag' 时覆盖实际上没有发生任何事情）。这是我的覆盖代码，我哪里错了？无法通过 onClick 调用 class 吗？

import React from "react";
import ImagesAndTags from "./ImagesAndTags";

export default class Overlay extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            manifest: [],
        }
    }
    render() {
        const imagesAndTags = new ImagesAndTags();
        imagesAndTags.getManifest(this.props.imageName, this.props.tag)
            .then(manifest => {
                this.setState({manifest: manifest})
            })
        return(
            <div className={'overlay'}>
                {this.state.manifest}
            </div>
        )
    }
}

Answer 1

不，你不能那样做

export default class TagListItem extends React.Component {

    render() {
        return(
            <div className={'tag'} onClick={() => <Overlay data={this.props}/>}>
                {this.props.tag}
            </div>
        )
    }
}

相反，您可以创建一个状态来控制是否要打开叠加层

export default class TagListItem extends React.Component {
      this.state ={
    overlay = false
}
    render() {
        return(
            <div className={'tag'} onClick={() => this.setState(state=>{overlay : !state.overlay})}>
    {this.state.overlay && <Overlay data={this.props}/>}
                {this.props.tag}
            </div>
        )
    }
}

可以通过另一个组件中的 onClick 侦听器调用 React JS class 吗？

Can a React JS class be called via an onClick listener in another Component?

onclick

reactjs