我想用ReactJS建立一个网站.在我的网站上,我在主页面上有一个切片按钮;
单击切片按钮时,每一面都显示不同的图像.
我添加链接到菜单栏以及切片按钮(我将调用左 - 右)所以当您单击链接时,第一个转到主页面的一部分然后它移动切片按钮并显示图像.
当我在主页面上时,链接没有任何问题,但问题是; 我对所有页面都使用相同的菜单栏,当我单击其他页面上菜单中Left
的Right
右侧链接时,它会停止.
链接打开主页,但保持主页的开头.
更新2:虽然问题不在于Toggle button
但我想在主页面中添加切换功能,你可以看到所有.
注意:我删除toggle button
但链接不起作用(当我删除功能时我看不到按钮但是当我单击菜单中的链接时,页面没有链接到主页中放置的按钮的确切部分所以我仍然有同样的问题.)
这是我ChangeViewButtonClick
的主要功能;
import React, { Component } from "react";
class Main extends React.Component{
constructor(props) {
super(props);
this.state = {
view: "Left"
};
this.ChangeViewButtonClick = this.ChangeViewButtonClick.bind(this);
this.ChangeViewToggle = this.ChangeViewToggle.bind(this);
}
togglePopup() {
this.setState({
showPopup: !this.state.showPopup
});
}
ChangeViewToggle() {
if (this.refs.toggle.state.checked === true) {
this.setState({ view: "Left" });
this.refs.toggle.state.checked = false
} else {
this.setState({ view: "Right" });
this.refs.toggle.state.checked …
Run Code Online (Sandbox Code Playgroud) 这是一个代码,我试图显示每个点的车速.
import plotly.plotly as py
from plotly.graph_objs import *
mapbox_access_token = 'MAPBOX API KEY'
data = Data([
Scattermapbox(
lat=dataframe_monday_morning['latitude'],
lon=dataframe_monday_morning['longitude'],
mode='markers',
marker=Marker(
size=5,
color =dataframe_monday_morning['speed'],
colorscale= 'YlOrRd',
#opacity=0.3,
symbol = 'circle',
),
)
])
layout = Layout(
autosize=True,
hovermode='closest',
width=1300,
margin=go.Margin(
l=0,
r=0,
b=0,
t=0
),
height=700,
mapbox=dict(
accesstoken=mapbox_access_token,
bearing=0,#
center=dict(
lat=-36.7526,
lon=174.7274
),
pitch=0,
zoom=16.2,
style='dark',
),
)
fig = dict(data=data, layout=layout)
py.iplot(fig, filename='Multiple Mapbox')
Run Code Online (Sandbox Code Playgroud)
但是当我尝试
color =dataframe_monday_morning['speed']
Run Code Online (Sandbox Code Playgroud)
代码选择当前数据最小和最大速度然后给我一个图表.在数据中,一些速度数据间隙非常大,所以我想在我的速度值之间创建一个色标.(例如,如果您选择最高速度200公里/小时,您的其他30公里/小时和90公里/小时看起来颜色相似,但通常速度通常不同)
我的问题是如何创建一个用于选择速度颜色的比例?
编辑:
这是我编辑的数据示例.
13 1.464301e+10 2015-11-15 18:28:50 191 10051 76 …
Run Code Online (Sandbox Code Playgroud) 如果这是一个愚蠢的问题,我不知道如何创建这个抱歉.
我有一个表两个团队和总监视,我稍后会在不同的地方使用这些信息,所以我的想法将这两列列在一列但两行不同:
HomeTeam AwayTeam Totalwatch
A B 100
A C 90
C A 80
D B 70
C E 50
Run Code Online (Sandbox Code Playgroud)
我能这样吗
Teams TotalWatch
A 100
B 100
A 90
C 90
C 80
A 80
D 70
B 70
C 50
E 50
Run Code Online (Sandbox Code Playgroud)
我有几列,所以他们也会重复.
只是一个注释,我知道如何concat
在一行中使用concat
函数我不知道如何用两行
我正在尝试制作一个带有循环背景视频的页面React js
。
当我编译代码时,我可以看到视频正在浏览器上立即播放,但是当我单击网站链接时,视频没有播放。我应该单击Home
页面中的按钮并重新开始。
我用了
<video src={BackVideo} autoplay="true" loop="true">
Run Code Online (Sandbox Code Playgroud)
我无法使用:
react-native-video
库,因为当我在代码中导入库时出现错误。
另外,我还有一个问题,视频Safari
根本无法播放。
有人能帮助我吗。
Javascript
这是我的文件部分
render() {
return (
<div>
<div className="bgded overlay">
{/* Menu, call the menu component with the ChangeViewButtonClick function recieved from Dashbaord */}
<Menu ChangeViewButtonClick={this.props.ChangeViewButtonClick} />
</div>
<header className="v-header container">
<div class="fullscreen-video-wrap">
<video src={BackVideo} autoplay="true" loop="true"> </video>
</div>
<div className="header-overlay"></div>
<div className="header-content">
<article>
<h1 className="heading">Something</h1>
<h2 className="heading">something too</h2>
</article>
</div>
</header>
{/* Start of Overview */}
<div className="wrapper row3">
<main …
Run Code Online (Sandbox Code Playgroud)