reactjs - 如何更改 React 中全局变量的值？

Question

我试图更改 React 函数内的全局变量的值，但失败了。有人可以告诉我为什么以及如何制作aaa“ABC”，非常感谢。

代码如下:

var aaa = 123;

var MyValue = React.createClass({
    render: function(){
        aaa = "ABC";
        return <h1>{this.props.title}</h1>;
    }
});

ReactDOM.render(
    <MyValue title={aaa} />, //still 123
    document.getElementById('container')
);

Answer 1

您的问题

您在这里尝试执行的操作存在很多问题。就像 @JamesDonnelly 所说，你需要研究 React state 和 prop 是如何工作的。

您似乎也误解了代码流程的工作原理。

var aaa = 123;

aaa 变量的定义。

var MyValue = React.createClass({
    render: function(){
        aaa = "ABC";
        return <h1>{this.props.title}</h1>;
    }
});

绑定(bind)到变量MyValue的函数的定义 - 重要的是要理解，您没有执行该函数，您只是定义它。

ReactDOM.render(
    <MyValue title={aaa} />, //still 123
    document.getElementById('container')
);

这里是渲染组件并运行上述函数的位置。

由于这是代码流程，因此您的赋值 aaa = "ABC" 发生在您调用 MyValue 的渲染之后> 您向其传递 title 属性的组件将 aaa 的值传递给它(仍然是 123)。

这可以通过下面的代码来证明。相同的代码在应用两次时会产生不同的值。同样，这是因为在第一次运行后，您更改了 aaa 的值，因此下一次运行的结果会有所不同。

var aaa = 123;

var MyValue = React.createClass({
    render: function(){
        aaa = "ABC";
        return <h1>{this.props.title}</h1>;
    }
});

ReactDOM.render(
    <MyValue title={aaa} />,
    document.getElementById('container')
);

ReactDOM.render(
    <MyValue title={aaa} />,
    document.getElementById('container2')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container"></div>
<div id="container2"></div>

---

如何修复

有点不清楚您想要实现什么目标，以及为什么要更改该值。但是，您可能想研究一下 React states 和 props。官方页面上有一个指南可能对您有用 Thinking in React 。另请查看setState() .

祝你好运!