javascript ReactgetElementById神秘失败

waxmsbnn 于 2023-03-16 发布在 Java

关注(0)|答案(1)|浏览(123)

这是我第一次创建自己的React类组件，由于某种原因，它的id没有“take”。

import React, { Component, forwardRef } from 'react';

class FilterGroup extends Component {
    constructor(props) {
        super(props)
    }

    result() {
        return ("some-text");
    }

    render() {
        return (
            <>
                (deleted a lot of stuff)
            </>
        )
    }
}

function App () {
    function read () {
        var filters = document.getElementById("filters")
        var result = filters.result()
        console.log(result);
    }

    return(
        <div>
        <button onClick={read}>
        Read
        </button>
        <FilterGroup id="filters"/>
        </div>
    )
}

export default App;

当我点击Read按钮时，我得到了一个错误，因为document.getElementById（“filters”）返回了null。在我看来，read（）函数是在DOM加载和建立之后被调用的long，而且我的构造函数正确地沿着了props，所以我不明白id是怎么丢失的。发生了什么？

JavaScript

来源：https://stackoverflow.com/questions/75749495/react-getelementbyid-mysteriously-failing

1条答案

按热度按时间

ffscu2ro1#

FilterGroup是一个组件，而不是HTML元素，因此id作为prop传递，而不是作为HTML属性传递。
因此，在FilterGroup组件中，需要将id属性传递给要为其分配id的元素。
例如

const FilterGroup = ({ id }) => {
  return <div id={id}>Filter group content</div>
}
export default FilterGroup

var result = filters.result()另外，元素对象中没有results()方法。
另外，我建议您使用refs，而不是使用原生的javascript dom查询方法

赞(0）回复(0）举报 2023-03-16

我来回答

javascript ReactgetElementById神秘失败

1条答案

相关问题

热门标签

最新问答