反应组件类变量访问

时间:2017-07-23 11:49:29

标签: javascript reactjs ecmascript-6

如何访问此the_frame变量?

export default class oneApp extends React.Component {
    constructor (props) {
        super(props);
        const the_frame = document.getElementsByClassName("frame")[0];
    }

    oneFunc() {  
        the_frame.style.display = "none"; // How do I access the_frame ?
    }

    twoFunc() {
        the_frame.style.display = "block"; 
    }

    render() {
        return (
            <div className="frame">Hello World</div>
        )
    }
}

我也尝试了this.the_frame = document.getElementsByClassName("frame")[0];但无法访问the_frame。感谢

2 个答案:

答案 0 :(得分:2)

如果您想要引用DOM元素,则应使用ref属性。

https://facebook.github.io/react/docs/refs-and-the-dom.html

答案 1 :(得分:1)

在反应中你需要使用refs。 React管理渲染,因此您无法保证在您尝试访问它时可以访问您的元素。它在构造函数中,所以你的渲染避风港还没有运行。

更多阅读 https://facebook.github.io/react/docs/refs-and-the-dom.html