Question

var Component = React.createClass({
    onClickButton : function(){
        //i want layer in this function
    },
    render: function () {
         return (
            <div className="Component">
                  <button onClick={this.onClickButton}>Click Me</button>
            </div>
         ); 
    }
});

function renderNow(data,layer){
    ReactDOM.render(
        <Component data={data} />,
        layer
        );
}

使用renderNow({name: 'John' },someLayer);

进行调用

我希望layer功能在onClickButton函数中传递renderNow函数。

我尝试将图层传递给render函数和setState layer，但它给了我StackOverflow错误

Answer 1

我不确定该图层究竟是什么以及您希望实现什么，但我认为您应该能够将图层作为道具传递给您的组件。

function renderNow(data,layer){
    ReactDOM.render(
        <Component data={data} layer={layer} />,
        layer
    );
}

然后

...
onClickButton : function(){
    this.props.layer //i want layer in this function
},
...

Answer 2

Marek的answer就是我这样做的方式......但还有另一种方式使用ReactDOM.findDOMNode()

var Component = React.createClass({
    onClickButton : function() {
        //i want layer in this function
        const layer = ReactDOM.findDOMNode(this); // <-- Here you go
    },
    render: function () {
         return (
            <div className="Component">
                  <button onClick={this.onClickButton}>Click Me</button>
            </div>
         ); 
    }
});

参考： https://facebook.github.io/react/docs/react-dom.html

注意：

文档通常建议不要突破组件抽象：

注意：

findDOMNode是用于访问底层DOM节点的转义符号。在大多数情况下，不鼓励使用此逃生舱，因为它会刺穿组件抽象。

获取渲染层Onclick React

2 个答案:

注意：