从外部js传递参数到react prop
从外部js传递参数到react prop
提问于 2018-11-19 15:36:44
正在尝试将应用内网页转换为React。应用webview自动调用Javascript函数来将访问令牌传递到网页。那么，是否可以使用相同的现有函数来传递令牌变量并将其存储为React prop呢？
HTML
<div id="app"></div>
<script>
function setToken(token){
//set token to App token prop
}
</script>JS
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
token: "",
}
}
render() {
return (
<div>
<p>{this.state.token}</p>
</div>
);
}
}
ReactDOM.render(<App />, document.querySelector("#app"))回答 4
Stack Overflow用户
发布于 2018-11-19 15:54:44
你可以让它成为一个回调函数，这样当它有一个结果时，它将被另一个函数调用(这意味着它将从React内部传递一个函数，然后更新状态/属性。如果您希望以最少的更改完成此操作，我建议您让函数将令牌存储在一个变量中，然后在React中查询此变量。
Stack Overflow用户
发布于 2018-11-19 16:04:51
在React应用程序外部访问React组件实例是不可能--或者至少是不切实际的。这应该以相反的方式完成，组件应该公开全局函数：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
token: "",
}
}
componentDidMount() {
window.setToken = token => {
this.setState({ token });
}
}
...
}在React组件初始化之前不应调用setToken。根据调用setToken的位置，将使用它的代码包装在React应用程序中并避免使用全局变量可能是有益的。
Stack Overflow用户
发布于 2018-11-19 17:02:01
我已经修改了小提琴：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
token: "test",
}
}
componentDidMount(){
setToken(this.state.token);
}
render() {
return (
<div>
<p>{this.state.token}</p>
</div>
);
}
}
ReactDOM.render(<App />, document.querySelector("#app"))页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53370176
复制相关文章
相似问题
腾讯云开发者
