如何在 reactjs 中渲染 html 脚本
Posted
技术标签:
【中文标题】如何在 reactjs 中渲染 html 脚本【英文标题】：how to render html script in reactjs 【发布时间】：2017-12-23 01:18:03 【问题描述】：<li><a id="customPopover">Data Source One</a>
<i class="fa fa-times"></i>
<div class="axis_popover left">
<div class="axis_popover_title">Title</div>
<div class="axis_popover_content">
<p><input type="text" class="form-control box_ip"/></p>
<p><button class="btn">button</button></p>
</div>
</div>
有这样的脚本
有这样的 html 代码，我需要在 react 中渲染。
【问题讨论】：
$("#customPopover").click(function() $(".axis_popover").toggle(); ); 先读这个facebook.github.io/react/docs/hello-world.html，你可以自己写试试 我试过这个 handleClick()this.setState(toggle()) 和 Data Source One一个> 这能回答你的问题吗？ How do you import a javascript package from a cdn/script tag in React? 【参考方案1】：您可以参考这个将使用 ReactJS 运行的示例。它会给你关于 ReactJS 的基本概念。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- use react js 15.0 js -->
</head>
<body>
<div id="showHere"></div>
<script type="text/babel">
var Example = React.createClass(
render: function()
return ( <div>
<a id="customPopover">Data Source One</a>
<i class="fa fa-times"></i>
<div class="axis_popover left">
<div class="axis_popover_title">Title</div>
<div class="axis_popover_content">
<p><input type="text" class="form-control box_ip"/></p>
<p><button class="btn">button</button></p>
</div>
</div>
</div>)
);
ReactDOM.render(
<div>
<Example></Example>
</div>,
document.getElementById('showHere') );
</script>
</body>
</html>【讨论】：
而不是我在 jsx 中需要的 html 然后将其转换并放在同一个地方。 在我使用 ES6 的意义上，我需要在 es6 中渲染组件 即使你只添加简单的html文件，它也会运行。 我已经在 es6 中有组件，点击按钮我需要弹出窗口。我已经有我发布的弹出窗口的 html 文件。所以为此我有如下脚本 $("#customPopover").click(function() $(".axis_popover").toggle(); );如何在组件中渲染以上是关于如何在 reactjs 中渲染 html 脚本的主要内容，如果未能解决你的问题，请参考以下文章
如何在 reactjs 中使用 onclick 事件渲染子组件？