Fatal编程技术网
  • javascript/
  • Javascript 使用外部参数启动嵌入式react应用程序

Javascript 使用外部参数启动嵌入式react应用程序

javascript html reactjs

Javascript 使用外部参数启动嵌入式react应用程序,javascript,html,reactjs,Javascript,Html,Reactjs,我在网页中嵌入了一个react应用程序，该应用程序应该从页面中获取的参数开始。现在我在div中传递index.HTML文件中的参数，但问题是如果参数更新，应用程序将不会注意到更改 index.HTML <html> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ic

我在网页中嵌入了一个react应用程序，该应用程序应该从页面中获取的参数开始。现在我在div中传递index.HTML文件中的参数，但问题是如果参数更新，应用程序将不会注意到更改

index.HTML

  <html>
    <head>
      <meta charset="utf-8" />
      <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="theme-color" content="#000000" />
      <meta name="description" content="Web site created using create-react-app" />
      <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
      <title>Sales flow</title>
    </head>
    <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div class="staringId" packageId="2" itemId="5" channelId="9"></div>
    </body>
  </html>
用于嵌入应用程序的javascript文件

   <div class="staringId" packageId="2" itemId="5" channelId="9"</div>
    <script src="./dist/runtime-main.8d32315e.js"></script>
    <script src="./dist/2.4c89be1e.chunk.js"></script>
    <script src="./dist/main.a41deb26.chunk.js"></script>

这个想法是在HTML中只有一个顶级组件，而您试图传递的任何参数（道具）都位于顶级组件中的其他组件上。下面是它的大致结构

index.html


<html>
 <body>
   <div id="app"></div>
 </body>
</html>






index.js


import './index.scss';
import App from './App'

const div = document.querySelector('.staringId')

    ReactDOM.render(
        <App domElement={div} />,
        div
    );



import './index.scss';
import App from './App'

ReactDOM.render(
  <App  packageId="2" itemId="5" channelId="9" />, // you can choose to dynamically pass the value depends on what you get from page
  document.getElementById("app")
);



import./index.scss'；
从“./App”导入应用程序
ReactDOM.render(
，//您可以选择动态传递值，具体取决于您从页面中获得的内容
document.getElementById（“应用程序”）
);


App.js


const App = ({ domElement }) => {
   const package = domElement.getAttribute("packageId")
   const item = domElement.getAttribute("itemId")
   const channel = domElement.getAttribute("channelId")

  const [data, setData] = useState({
    packageId: '',
    itemId: '',
    channelId: '',
  })

  useEffect(() => {
    setSelData({
    packageId: package,
    itemId: item,
    channelId: channel,
  })
  }, [package, item, channel])
}



const App = ( props ) => {
  // props.packageId and etc are available here 
  // you can then choose to render it with these props value
  return (
    <MyOtherComponent otherProps="ifany" />
  );

}

export default App;



const-App=（道具）=>{
//这里提供道具、包装等
//然后可以选择使用这些道具值渲染它
返回(
);
}
导出默认应用程序；

您为什么希望页面中有多个
？也许你可以用多个其他组件重组顶级应用程序组件？@HWSiew其实没有理由，只是更新了帖子。你打算如何重组应用程序组件？如何更新这些属性？？除非状态发生更改，否则该组件不会更新，并且DomeElement.getAttribute不会触发中的任何更改state@SomeoneSpecial这就是我的问题，如何更新这些属性。我知道getAttribute不能触发状态的更改，但我没有任何选择，或者从dom读取参数并通过每次更改更新状态，或者尝试通过主页上的函数传递参数。您是如何嵌入到您的网页中的？您使用Javascript并创建iframe，对吗？你能分享这些密码吗？@HWSien谢谢你的回答。我已经尝试过这个解决方案，但无法将参数从主机页传递到react应用程序。你将如何嵌入应用程序并传递参数？你的参数看起来如何？全局变量还是查询字符串？