Question

我正在尝试使用React。我有一个包含一些内容的HTML页面和一个包含逻辑的相应JS脚本。现在我决定使用React在按钮点击事件中动态创建一些可重用的视图组件。

简单示例：

HTML

<script src="/ReactTester/react/react.js"></script>
<script src="/ReactTester/react/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>

<script src="/ReactTester/myreact.js" type="text/babel"></script>

<button onclick="button_click()">Button</button>
<div id="example"></div>

React + JS

var HelloWorld = React.createClass(
{
    render: function() 
    {
        return(<h1>Hello, world!</h1>);
    }
});

var button_click = function ()
{
    ReactDOM.render(<HelloWorld/>, document.getElementById('example'));
}

当我点击按钮时出现错误

ReferenceError: 'button_click' is not defined

如果我尝试在不使用按钮事件的情况下渲染元素，一切正常。混合React和普通的JS代码似乎是一个问题。我错过了什么吗？怎么了？

任何提示都会很棒。提前致谢！

Answer 1

试试这个

var HelloWorld = React.createClass({
    render: function() {
        return (
            <h1>Hello, world!</h1>
        );
    }
});

var button_click = function () {
    ReactDOM.render(<HelloWorld />, document.getElementById('example'));
}

document.getElementByTagName('button')[0].addEventListener('click', button_click);

Answer 2

您的文件中定义的button_click函数在全局范围内不可用。如果您通过window对象附加到全局范围，例如：window.button_click = ...将起作用。但是，如同其他答案中所述，明确附加事件处理程序是一个更好的选择，因为没有全局范围污染。

一起使用ReactJS和普通的javascript代码

2 个答案: