Question

我是ReactJS的新手。我有一个简单的React应用，可以独立运行。

现在，我从现有的HTML页面中调用它，并希望传递一个参数以响应应用程序并在react app中使用该参数。

我搜索了一下，发现可以在react应用程序中设置并选择窗口环境变量。

我该怎么做？有什么想法或样本吗？

谢谢！

Here is my scenario,

<html>
...
<body>
...
<a href="http://server.com/reactapp/index.html">call react app</a>
<input type="hidden" id="empno" value="1000" />
....
</body>
</html>
----
React app
index.js
--------------
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

let eno = document.getElementById("empno");

ReactDOM.render(<Products empnumber={eno}/>, document.getElementById('root'));


app.js
------
...
 render() {
        console.log(this.props.empnumber);

console log displays null. Thanks!

Answer 1

您可能会发现this article有用：

我们的React组件通过其props接收来自外界的数据的方式。每当我们需要用新数据更新组件时（这就是它的简单性所在），我们只是使用新的道具再次渲染它，React知道如何有效地做到这一点。

简而言之，找到调用ReactDOM.render(<App/>, container)或类似名称的部分，并将您的值作为属性传递给App，例如<App someprop={somevalue}/>

Answer 2

像这样将其安装到dom时，可以将值传递给React组件：

const someJson = {
    value1: '123',
    value2: '456',
};

render(<App someProp={someJson} />, document.getElementById('root'));

Answer 3

如果您通过描述的链接访问自己的应用，可以使用查询字符串？

<a href="http://server.com/reactapp/index.html?empnumber=1234">call react app</a>

然后在组件中，您可以像这样访问查询字符串

render() {
    console.log(this.props.location.query.empnumber);
}

还有一个不错的npm library可以从React组件访问查询字符串

从非反应式jQuery HTML表单页面传递参数以响应应用程序

3 个答案: