blocks|key|986555|text|你可以让它成为一个回调函数，这样当它有一个结果时，它将被另一个函数调用(这意味着它将从React内部传递一个函数，然后更新状态/属性。如果您希望以最少的更改完成此操作，我建议您让函数将令牌存储在一个变量中，然后在React中查询此变量。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|986556|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You could make it a callback function, so it will be given another function to call when it has a result (meaning it would be passed a function from within React that would then update the state/props. If you're looking to do this with a minimal number of changes, I would suggest that you have the function store the token in a variable, and then later query this variable in React.

blocks|key|3098569|text|在React应用程序外部访问React组件实例是不可能--或者至少是不切实际的。这应该以相反的方式完成，组件应该公开全局函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3098570|class+App+extends+React.Component+{
++constructor(props)+{
++++super(props);
++++this.state+=+{
++++++token:+"",
++++}
++}

++componentDidMount()+{
++++window.setToken+=+token+=>+{
++++++this.setState({+token+});
++++}
++}

++...
}|code-block|syntax|javascript|3098571|在React组件初始化之前不应调用setToken。根据调用setToken的位置，将使用它的代码包装在React应用程序中并避免使用全局变量可能是有益的。|offset|length|style|CODE|3098572|entityMap^0|0|0|H|8|U|8|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

It's impossible - or at least impractical - to access React component instance outside React application. This should be done in opposite way, the component should expose global function:

<pre><code>class App extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 token: "",
 }
 }

 componentDidMount() {
 window.setToken = token =&gt; {
 this.setState({ token });
 }
 }

 ...
}
</code></pre>

<code>setToken</code> shouldn't be called before React component initialization. Depending on where <code>setToken</code> is called, it may be beneficial to wrap the code that uses it with React application instead and avoid using globals.

blocks|key|782634|text|我已经修改了小提琴：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|782635|class+App+extends+React.Component+{
++constructor(props)+{
++++super(props);
++++this.state+=+{
++++++token:+"test",
++++}
++}
componentDidMount(){++++
++++setToken(this.state.token);
}

++render()+{
++++return+(
++++++<div>
++++++++{this.state.token}
++++++</div>
++++);
++}
}

ReactDOM.render(<App+/>,+document.querySelector("#app"))|code-block|syntax|javascript|782636|https://jsfiddle.net/wzovs2gy/1/|offset|length|782637|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|W|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

I have modified the fiddle:

<pre><code>class App extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 token: "test",
 }
 }
componentDidMount(){ 
 setToken(this.state.token);
}

 render() {
 return (
 &lt;div&gt;
 &lt;p&gt;{this.state.token}&lt;/p&gt;
 &lt;/div&gt;
 );
 }
}

ReactDOM.render(&lt;App /&gt;, document.querySelector("#app"))
</code></pre>

<a href="https://jsfiddle.net/wzovs2gy/1/" rel="nofollow noreferrer">https://jsfiddle.net/wzovs2gy/1/</a>

blocks|key|986586|text|感谢你们的帮助，我设法想出了一个解决方案(虽然不是优雅的工作)。我将ReactDom.Render()声明为一个变量，这允许我在Vanilla+JS中引用React父函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|986587|JS|986588|var+ReactDom+=+ReactDOM.render(<App+/>,+document.querySelector("#app"));|code-block|syntax|javascript|986589|HTML|986590|function+setToken(token){
++++ReactDom.setNewToken(token);
++}|986591|https://jsfiddle.net/wzovs2gy/2|offset|length|986592|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|V|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|10|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|12|8|@]|9|@$O|13|P|14|1|15]]|A|$]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|N]]]]

Thanks for your help guys, managed to figure out a solution (while not elegant does the job). I declared the ReactDom.Render() as a variable which allows me to reference the function within the React Parent in the Vanilla JS. 

JS

<pre><code>var ReactDom = ReactDOM.render(&lt;App /&gt;, document.querySelector("#app"));
</code></pre>

HTML

<pre><code>function setToken(token){
 ReactDom.setNewToken(token);
 }
</code></pre>

<a href="https://jsfiddle.net/wzovs2gy/2" rel="nofollow noreferrer">https://jsfiddle.net/wzovs2gy/2</a>

Trying to convert an in-app webpage to React. The app webview automatically calls a Javascript function to pass an access token to the webpage. So is it possible to use the same existing function to pass the token variable and store it as a React prop?

HTML

<pre><code>&lt;div id="app"&gt;&lt;/div&gt;
&lt;script&gt;
 function setToken(token){
 //set token to App token prop
 }
&lt;/script&gt;
</code></pre>

JS

<pre><code>class App extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 token: "",
 }
 }

 render() {
 return (
 &lt;div&gt;
 &lt;p&gt;{this.state.token}&lt;/p&gt;
 &lt;/div&gt;
 );
 }
}

ReactDOM.render(&lt;App /&gt;, document.querySelector("#app"))
</code></pre>

<a href="https://jsfiddle.net/wzovs2gy/" rel="nofollow noreferrer">https://jsfiddle.net/wzovs2gy/</a>

Pass parameter from external js to react prop

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

正在尝试将应用内网页转换为React。应用webview自动调用Javascript函数来将访问令牌传递到网页。那么，是否可以使用相同的现有函数来传递令牌变量并将其存储为React prop呢？HTML<div id="app"></div><script> function setToken(token){ ...

问从外部js传递参数到react prop
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从外部js传递参数到react propEN