我试图访问React中div的宽度和高度样式,但我遇到了一个问题.这是我到目前为止所得到的:
componentDidMount() {
console.log(this.refs.container.style);
}
render() {
return (
<div ref={"container"} className={"container"}></div> //set reff
);
}
这是有效的,但我得到的输出是一个CSSStyleDeclaration对象,在all属性中我可以为该对象的所有CSS选择器,但它们都没有设置.它们都设置为空字符串.
这是CSSStyleDecleration的输出:http://pastebin.com/wXRPxz5p
任何有关看到实际样式(事件继承的样式)的帮助将不胜感激!
谢谢!
我有一个很可能总是这样的数组:
[null, null, null, null, null]
有时这个数组可能会改为:
["helloworld", null, null, null, null]
我知道我可以使用for循环,但有没有办法indexOf用来检查数组中的某些东西是否等于null.
我正在寻找类似的东西:
var index = indexof(!null);
在过去的几天里我一直在使用React-Router,我一直很喜欢它!我遇到的一个问题是我找不到将状态从父组件传递到子组件的最佳方法.我一直在看几个堆栈溢出和博客帖子,但我似乎无法找到我想要的东西.这是一个关于我正在寻找的非常简化的例子.
class App extends React.Component {
constuctor(props) {
super(props);
this.state = {name:"helloworld", lastname:"world hello"};
}
render() { // SOMETHING LIKE THIS WOULD BE PREFFERED
if (this.props.children.name == "Home") {
{this.props.children myname={this.state.name}}
}
else if (this.props.children.name = "Account") {
{this.props.children anotherprop={this.state.lastname}}
}
}
}
class Home extends React.Component {
render() {
return (
{this.props.myname}
);
}
}
class Account extends React.Component {
render() {
return (
{this.props.lastname}
);
}
}
//ROuting config - (Only the routes not the config)
<Route path="/" …我在 componentDidMount() 中使用 setState 函数时遇到了一些问题。
我想要做的是：我正在尝试使 HTML5 圆圈响应（如果浏览器窗口更大，则更大，反之亦然）。
到目前为止我所做的：我一直将维度存储在称为 containerDim 的状态中。默认情况下，这设置为空。这是我所做的一个非常基本的实现：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {containerDim: null};
this.resizeCircle = this.resizeCircle.bind(this) //To not loose value of this
}
componentDidMount() {
var dimensions = window.getComputedStyle(this.refs.responsiveContainer); //Used to get width and height
this.setState({
containerDim: {width:dimensions.width, height: dimensions.height}
});
window.addEventListener("resize", this.resizeCircle));
}
resizeCircle() { //THE RESIZING WORKS, THE initial setting of state doesn't
var dimensions = window.getComputedStyle(this.refs.responsiveContainer); //Used to get width and height
this.setState({
containerDim: {width:dimensions.width, height: dimensions.height} …我目前正在创建一个网站，要求用户使用Steam登录后才能使用我网站的其余功能。Steam当前仅支持OPENID进行身份验证。我这样做的方法是按照以下步骤操作：
用户按下“使用Steam登录”按钮
我的前端重定向到steamcommunity.com
如果用户成功登录，则用户的浏览器应重定向到我的后端，然后我将该用户添加到数据库（如果他们还不在数据库中）并创建一个JSON Web令牌并将其发送回我的前端。
例如：
myfrontend.com?token={my_json_web_token}
然后，我的前端将此令牌另存为客户端cookie，并在对服务器的每个请求中，将此cookie的内容发送到服务器。
我已经集成了我的应用程序，但是它正在变得越来越流行，所以我想知道我实现它的方式是否有效。
谢谢
基本上我有一个白色但有紫色边框的按钮，文本是紫色的，当用户将鼠标悬停在图像上时，我希望背景颜色为紫色，文本为白色。现在，我可以让背景颜色从白色切换到紫色，但我无法让文本从紫色切换到白色。这是我目前拥有的代码：HTML：
<a href="index.php?page=learnmore"><div class="learnMore"><h3>LEARN MORE</h3></div></a>
CSS：
.learnMore {
width:140px;
height:35px;
border:1px solid purple;
margin:0 auto;
}
.learnMore:hover {
background-color:purple;
color:white
}
我不知道为什么 color:white 不会改变颜色。任何帮助是极大的赞赏！
基本上,当按下一个按钮时,我想要一个参数提供它,但这不起作用:
var button = document.getElementById("button");
button.onClick = doThis(arg);
但这确实有效(没有参数):
var button = document.getElementById("button");
button.onClick = doThis;
第一个示例无法正常工作的原因是因为函数自动运行而不等待单击.
如何在Click上提供参数？