我试图更改 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')
);
最佳答案
您的问题
您在这里尝试执行的操作存在很多问题。就像 @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() .
祝你好运!
关于reactjs - 如何更改 React 中全局变量的值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40302377/