Question

我试图通过youtube中的this tutortial学习反应js。我的程序只是一个非常简单的html代码，带有一些react.js。我遵循他所做的每一步，但我没有得到与他相同的结果。你能告诉我我的代码有什么问题，为什么它不起作用？

代码：

clear all
close all

dx = 5;
dz = 1;

%angle between line and ground
a=atan(0.05);

%%%define domain
xi = 0:dx:20e3;
zi = 0:dz:1000;
m=length(zi);
n=length(xi);

%create grid
[x,z] = meshgrid(xi,zi);

%z where line starts
zs = 700;
%set line
 for i = 1:findnearest(xi,zi(zs)*1/a)
  xind(i) = i;
  zind(i) = findnearest(zi, fix(-xi(i)*a +zi(zs))); 
 end


depth = repmat(zi',1,n); %simply the coordinate zi repeated for all xi

 %calculate distance from the line
 for ii=1:n %for every x

    zslope = -a*xi(ii)+zi(zs);%equation of the line

    zz(ii)=zslope;
   if zslope>=0 %if the line is still in the domain (z>0)
     for jj=1:m %for every z

       if zi(jj)>=zslope %above the line

         Zs(jj,ii) = zi(jj)-zslope; %height above the line

        elseif zi(jj)<zslope %below the line (ground)
%            
          Zs(jj,ii)=NaN; 

       end
     end%for on z

   elseif zslope<0 %the line is no longer in the domain

       for jj=1:m %for every z

          Zs(jj,ii) = zi(jj)-zslope; %height above the line

       end
   end
end%for on x 

figure
imagesc(Zs)
colorbar
title('distance from the line')

%zone above the line
maskINT=zeros(m,n);
inds = find(Zs>=0); %erase values under the line
maskINT(inds)=1;


figure
imagesc(depth);colorbar
title('depth')

figure
imagesc(depth.*maskINT);colorbar
title('depth  above the line')

figure
contour(depth.*maskINT);colorbar
set(gca,'YDir','Reverse')
title('depth')

我只能看到＆＃34;主页，关于我们，服务，联系我们＆＃34;文本。我看不到的是＆＃34;这是一个组件！＆＃34; myReactObject中的文本。在此先感谢您的帮助...

Answer 1

您遇到的问题是因为您尝试直接通过浏览器处理JSX语法（嵌入了html标记的javascript），但您需要使用Babel来转换代码。

此时，您有两个选择：

将babel添加到您的HTML：

JSX

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>With Babel</title>
    <link rel="stylesheet" type="text/css" href="index_css.css">
    <script src="src/js/react.min.js"></script>
    <script src="src/js/react-dom.min.js"></script>
    <script src="src/js/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
</head>
<body>

<div class="homeLinks_dcls">
<p><a href="index.html" id="home_id"> Home</a></p>
<p><a href="aboutUs.html" id="aboutUs_id"> About Us</a></p>
<p><a href="services.html" id="services_id"> Services</a></p>
<p><a href="contactUs.html" id="contactUs_id"> Contact us</a></p>
</div>

<div id="container"></div>

<script type="text/babel">
var myReactObj = React.createClass({
  render: function(){
    return (<h2>This is a component!</h2>);
  }
});

ReactDOM.render(
  React.createElement(myReactObj),
  document.getElementById('container')
);

</script>

</body>
</html>

将您的代码更改为仅使用javascript，如下所示：

javascript

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Without Babel</title>
    <link rel="stylesheet" type="text/css" href="index_css.css">
    <script src="src/js/react.min.js"></script>
    <script src="src/js/react-dom.min.js"></script>
    <script src="src/js/browser.min.js"></script>
</head>
<body>

<div class="homeLinks_dcls">
<p><a href="index.html" id="home_id"> Home</a></p>
<p><a href="aboutUs.html" id="aboutUs_id"> About Us</a></p>
<p><a href="services.html" id="services_id"> Services</a></p>
<p><a href="contactUs.html" id="contactUs_id"> Contact us</a></p>
</div>

<div id="container"></div>

<script type="text/javascript">
var myReactObj = React.createClass({
  render: function(){
    return React.createElement('h2', { }, 'This is a component!');
  }
});

ReactDOM.render(
  React.createElement(myReactObj),
  document.getElementById('container')
);

</script>

</body>
</html>

反应js简单脚本不起作用

1 个答案: