Question

我可以获取地图函数中元素的类或id或引用的引用吗？

componentDidMount(){
        console.log(ReactDOM.findDOMNode(this.refs.items));
}
render(){

    var loop = Object.keys(this.state.posts).map((key) => {
        var post = this.state.posts[key];
        return(
            <div key={key} className="hakuna-matata" ref="items">
                ...
            </div>
        )
    }

    return {loop}
}

我想在jQuery中访问ref = items或class = hakuna-matata数组或对象

有人可以帮忙吗？请

Answer 1

那么，loop的内容就是一个数组。将数组折叠为字符串以获取整个HTML代码。

其次，问题是你希望jQuery在哪里使用HTML代码。只要您在render方法中，代码就不在DOM Tree中。所以你必须让jQuery解析代码：var myJqueryNode = $(loop.join());。

如果您在执行渲染后在React中使用某种事件处理程序，则可以轻松查询DOM树，如：$('.hakuna-matata');

Answer 2

您可能不希望将ref放在循环中，因为它会导致重复。相反，你可以这样做：

handlePost = (e, post) => {
  //do whatever to post here...
  //do whatever to e here...
}

render(){
    const loop = Object.keys(this.state.posts).map((key) => {
        const post = this.state.posts[key];
        return(
            <div key={key} className="hakuna-matata"
              onClick={(e) => {this.handlePost(e, post}}>
                ...
            </div>
        );
    }
    return {loop}
}

点击帖子后，将帖子对象传递给方法handlePost，您可以在不使用refs的情况下对其执行任何操作。您还可以传递e或事件并访问事件对象。

ReactJS从循环/映射中获取refs / class / id以在JQuery中使用

2 个答案: