根据我目前所遇到的情况,似乎ReactJS不会更新localStorage的状态.我的代码如下.
var Frr = React.createClass({
getInitialState: function(){
return { lights: localStorage.getItem('state')}
},
switchoff: function(){
this.setState({lights: localStorage.setItem('state', 'off')});
},
switchon:function(){
this.setState({lights: localStorage.setItem('state', 'on')});
},
render:function(){
if (this.state.lights === 'on'){ return (
<div>
<p>The lights are ON</p>
<input type="submit" value="Switch" onClick={this.switchoff}/>
</div>
);}
if ( (this.state.lights === 'off')|| (!this.state.lights) ){ return (
<div>
<p>The lights are OFF</p>
<input type="submit" value="Switch" onClick={this.switchon}/>
</div>
);}
}
});
简单的应用.如果localstorage的状态为off或empty,则使用ON按钮渲染视图.如果启用了localstorage,则使用OFF按钮渲染视图.
我希望能够根据localStorage的状态设置此渲染.我尝试使用基本布尔值做同样的事情,它按预期工作.但是,使用localStorage时,某些内容似乎不起作用.
如果我的逻辑完全消失,我不会感到惊讶.
编辑:要解释,按钮和视图不会按预期运行.当指示灯熄灭且存储中没有任何内容时,该按钮会将ON添加到localStorage,但不会更改视图.如果我刷新页面,页面呈现为ON,当我点击它时,按钮的工作方式是关闭它.但它只能工作一次,这让我相信OFF开关可能有问题.
我在下面使用变量.
var newInput = {
title: this.inputTitle.value,
entry: this.inputEntry.value
};
这由我的输入字段使用.
<input type="text" id="inputname" className="form-control" ref={el => this.inputTitle = el} />
<textarea id="inputage" ref={el => this.inputEntry = el} className="form-control" />
<button className="btn btn-info" onClick={this.sendthru}>Add</button>
一旦我激活,{this.sendthru}我想清除我的输入字段.但是,我不确定该怎么做.
另外,如本例所示,有人指出我应该使用ref属性作为输入值.我不清楚的是它到底意味着什么{el => this.inputEntry = el}.el在这种情况下有什么意义？
我想知道在构建Vuejs模板时如何最好地安排新行.我所拥有的代码不起作用,因为它破坏了JavaScript容器.Vue.js希望我将整个html放在一行中,这在我计划添加页脚内容时有点不切实际.
Vue.component('footer-component', {
template: "
<div id='footer'>
Footer Stuff
</div>"
})
new Vue({
el: 'footer'
})
我一直试图找到使用Vue进行HTML模板化的例子,但是我很难找到它们.使用React时,我能够通过多行编写HTML代码.我怎么能为Vuejs做同样的事情？
我正在尝试使用Chart JS创建一个表,其中包含来自我的JSON文件的动态生成的数据点.我的代码的逻辑如下:
var datapart;
for (i = 0; i < jsonfile.jsonarray.length; i++){
datapart += {
label: jsonfile.jsonarray[i].name,
data: [jsonfile.jsonarray[i].age]
};
}
var config = {
type: 'line',
data: {
labels: ["Graph Line"],
datasets: [datapart]
}
}
我的JSON文件同时看起来像这样:
{
"jsonarray": [
{
"name": "Joe",
"age": 12
},
{
"name": "Tom",
"age": 14
}
]
}
该config变量包含ChartJS的配置设置,包括设置数据点.加载到ChartJS时,config提供显示我的图表所需的信息.
无论如何,我的想法是使用变量datapart作为使用for循环附加数据集的方法.不幸的是,代码没有产生结果.我知道我添加变量的方法有问题,但我不确定如何继续.
我怎样才能将这些JSON值添加到Chart.js？
我有一个使用React状态构建的前端，该状态旨在根据用户操作进行调整。但是，我的前端React也打算显示并允许操纵我的服务器端数据。目前，我的视图引擎是EJS，并且正在使用它来显示数据。举一个广泛的例子：
return (<div class="col-md-6 col-sm-6 col-xs-7">
<ul>
<li><span class="point">Name:</span> <%= user.profile.name %> </li>
<li><span class="point">Email:</span> <%= user.email %> </li>
</ul>
</div>);
我已经确定我不能将这些ejs <%=标记与React 混合使用。这使得处理数据成为一个挑战。除非我在jQuery中重做UI，否则我不确定如何继续。
我查看了此React文档中用于传递数据的内容，但是在对其进行测试后，结果不允许我进行跨域调用，并且我的MongoDB存储在MongoLab上。因此，我被降级为使用EJS来调用我的数据。
由于将React与EJS结合使用的限制，令我困惑的是，要实现具有服务器端数据的UI工具（如React），必须使用哪些解决方案。
我有一个JSON文件,如下所示.虽然文件本身似乎不必要地长了一个例子,但我有理由把它包括在内.基本上,在我看来,我的文件太大,无法通过TCP到我的实时网站.
{
"FormatNumber": 1,
"Team_Types": [{
"Teams": "EmmersonCod",
"Channels": [{
"Team_Name": "Tanaka",
"Team_Members": 1,
"Team_Mascot": "Dolphin"
},
{
"Team_Name": "Drago",
"Team_Members": 2,
"Team_Mascot": "Lundgren"
},
{
"Team_Name": "Apollo",
"Team_Members": 3,
"Team_Mascot": "Crews"
},
{
"Team_Name": "Cobra",
"Team_Members": 4,
"Team_Mascot": "Kai"
}
]
},
{
"Teams": "Candy",
"Channels": [{
"Team_Name": "Simson",
"Team_Members": 1,
"Team_Mascot": "The"
},
{
"Team_Name": "Rick",
"Team_Members": 2,
"Team_Mascot": "Sanchez"
}
]
},
{
"Teams": "FoxNews",
"Channels": [{
"Team_Name": "David",
"Team_Members": 1,
"Team_Mascot": "Bannon"
},
{
"Team_Name": "Rickety", …我试图从PHP生成一个JSON文件.到目前为止,我有以下输出:
"students":[
{"name": "John"},
{"name": "Alex"},
{"name": "Siri"},
]
每个学生都有一个逗号,当我明显要删除最后一个逗号.通常我会用if语句执行while循环.但是,我的数据库结构使这种情况不同.
我的PHP代码如下所示:
while ($getschools = $schools->fetch_assoc()){
$findschools = $dbcon->query("SELECT *
FROM school_".$getstate['texas']."
WHERE students = '".$studentGPA['best']."'");
while ($beststudents = $findschools->fetch_assoc()){
$jsonfield.= '{"name":"'.$getstudent['firstname'].'"},';
}
}
代码可能有一些缺失部分,但希望上下文清晰.我使用以前的提取请求中的php变量来从多个表中获取数据.
在我的例子中,有多个表对应于德克萨斯州的学校.我得到了来自这多所学校(或桌子)的每个学生的名字.我试图将此信息应用于JSON输出.
该$jsonfield行显示了我的代码的循环部分.我试图弄清楚如何在我的示例中实现这样的代码:
$i = 0;
$countstudents = $getschools->num_rows;
if ($i < $countstudents){
$jsonfield.=',';
}
这样我的逗号只应用于我的数据部分,而不是我循环的最后一次迭代.
我的 excel 文件名为thefilehere.xml包含以下信息：
<Main>
<Name>Rotunda</Name>
<Age>43</Age>
</Main>
<Main>
<Name>John</Name>
<Age>22</Age>
</Main>
作为对 D3 和 XML 文件缺乏经验的人，我试图了解如何从 XML 文件调用嵌套数据。我的基本 HTML 如下：
超文本标记语言
<div id="chart"></div>
我的 Javascript 不起作用，希望能清楚地说明我想要完成的任务。我想选择主容器（在本例中为Main），然后从那里选择其子容器（在本例中Name为 和Age）。Age是通过图表来显示的。Name是图表上的标签。
JavaScript
d3.xml("thefilehere.xml", function(err, xml) {
d3.select("#chart")
.selectAll("div")
.data(xml.documentElement.getElementsByTagName("Main"))
.enter().append("div")
.style("width", function(d) { return d("Age").textContent * 1 + "px"; })
.text(d("Name").textContent);
});
我有通过TCP传递给我的字符串内容.此信息仅相关,因为这意味着我不会一直检索相同的字符串.我有一个<start>和<stop>分隔符,以确保任何时候我通过TCP获取数据,我输出完整的内容.
我传入的内容如下:
<start>Apple Bandana Cadillac<stop>
我想在这两者之间得到的一切<start>和<stop>.所以只是Apple Bandana Cadillac.
我这样做的脚本如下:
servercsv.on("connection", function(socket){
let d_basic = "";
socket.on('data', function(data){
d_basic += data.toString();
let d_csvindex = d_basic.indexOf('<stop>');
while (d_csvindex > -1){
try {
let strang = d_basic.substring(0, d_csvindex);
let dyson = strang.replace(/<start>/g, '');
let dson = papaparse.parse(dyson);
myfunction(dson);
}
catch(e){ console.log(e); }
d_basic = d_basic.substring(d_csvindex+1);
d_csvindex = d_basic.indexOf('<stop>');
}
});
});
这意味着我在<stop>字符串之前获取所有内容并输出它.我还包括该行,let dyson = strang.replace(/<start>/g, '');因为我想删除<start>文本.
但是,因为这是TCP,我无法保证获得此字符串的所有部分.结果,我经常回来 …
试图搞清楚.不能.我有2个数组,我想对其中一个数组的索引进行排序以匹配其对象的索引.
数组1如下:
var arr1 = [
{
"name": "bobby",
"occupation": "singer"
},
{
"name": "mindy",
"occupation": "artist"
}
]
和数组2:
var arr2 = [
{
"name": "mindy",
"hobby": "drawing"
},
{
"name": "bobby",
"hobby": "driving"
}
]
重新索引哪一个并不重要.关键是我有两个名字bobby,mindy并且我想重新安排其中一个数组,以便它们的索引匹配另一个.
这是我在Reactjs面临的挑战,尽管我不相信它必然归功于它.我正在尝试在React中进行API调用.虽然它有效,但代码还会显示我的API密钥,下面用我的javascript变量表示sting.当我在浏览器中预览代码时,sting很清楚地显示了我的API密钥.
render: function() {
if (this.state.trial) {
return this.iftroo();
}
}
});
var Troo = React.createClass({
render: function() {
var sting = "<?php
$con = mysqli_connect('localhost', 'root', '', 'worldly') or die("Trying");
$query = "select * from testi";
$result = mysqli_query($con, $query);
while($row = mysqli_fetch_array($result)){
echo $row["userName"];}
?>";
var weather = new XMLHttpRequest();
weather.open("GET", "http://api.openweathermap.org/data/2.5/weather?q=London,uk&units=imperial&appid="+sting, false);
weather.send(null);
var r = JSON.parse(weather.response);
var tempurature = r.main.temp;
return (
<p>
{tempurature}
</p>
我知道为了让这个工作,我可能不得不在我的PHP中嵌入我的javascript代码.但是,这样做会导致错误,例如PHP无法识别javascript var字符.
我可以采取哪些措施来隐藏浏览器中的API密钥？