Question

<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代码，我需要在反应中呈现。

Answer 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>

如何在reactjs中呈现html脚本

1 个答案: