Reactjs 如何将道具从html div传递到react中的函数组件？_Reactjs

Reactjs 如何将道具从html div传递到react中的函数组件？

reactjs

Reactjs 如何将道具从html div传递到react中的函数组件？,reactjs,Reactjs,不知道如何将属性从html传递到react文件。这是现行守则, <html> <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src

不知道如何将属性从html传递到react文件。这是现行守则,

<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<body>

<div id="mydiv" parm="some info"></div>
<script type="text/babel" src="h2.js"></script>

</body>
</html>

在react文件中，我现在正在手动发送props“parm={2}”

const Hello=（道具）=>{
控制台日志（道具）；
返回（带有函数组件{props.parm}的h2）；
}
ReactDOM.render（，document.getElementById（'mydiv'））；

我的问题是，如何将parm从html传递到Hello（）组件？请注意，我必须关闭CORS进行本地测试，

React不是设计成这样的，您使用的HTML div是根元素，所有组件都将以该元素呈现。所以你不能通过。但首先，你为什么要这么做。还有其他方法可以在react组件内部使用全局值

这不是理想的解决方案，但您可以使用全局范围来获取内部值，或者创建单独的服务来存储值，然后导入内部react组件。

当然，这是可能的

注意：我不确定您的用例是什么。也许您正在“对现有项目作出反应”？如果你不是，我建议你看一看，因为他们可能会建议一个更好的方法来实现你的结果

无论如何，这里有一个例子，它实现了您所要求的。请注意，您的HTML参数已记录到控制台。然后，您可以在内部使用它

希望有帮助

这不是React设计的工作方式

ReactDOM.render（…，document.getElementById（'mydiv'））

将用您的React组件替换具有

mydiv的id
的div的内容。你为什么要这么做？您的用例是什么？这也与CORS无关。我建议阅读一些React文档，或者遵循React教程。Hello是我的功能组件，我想有一种方法来手动测试和单元测试这个组件。我是reactjs新手，所以还在做研究。有没有办法直接将myParam传递到LikeButton（）中？所以LikeButton（props）应该是LikeButton（domContainer），这里domContainer=document.querySelector（“like按钮容器”）；
const Hello = (props) => {
        console.log(props);
        return (<h2>h2 with function component {props.parm}</h2>);
}

ReactDOM.render(<Hello parm={2} />, document.getElementById('mydiv'));

// here's how to get the value itself
const myParam = document
    .querySelector("#my_container") // get the html element, e.g. a div
    .getAttribute("myParam"); // get the value of the custom property on that element