在这个例子中,我想从底部旋转锤子,所以有没有办法准确知道元素上特定点的正确坐标,还是应该随机尝试不同的点?
svg {
width: 50%;
}
.hammer-icon {
transform-origin: 200px 50px;
transition: transform .3s ease-out;
}
.hammer:hover .hammer-icon {
transform: rotate(45deg);
}
Run Code Online (Sandbox Code Playgroud)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -50 400 200">
<g class="hammer">
<circle class="hammer-bg" fill="#FFD466" cx="200" cy="50" r="90"></circle>
<path class="hammer-icon" fill="#FFFFFF" d="M262,32.9l-6.7-6.9c-1.4-1.4-3.6-1.4-5-0.1l-2.8,2.8l-14.6-15c-7-7.2-20.3-18.5-30.1-16.4
c-1.6,0.3-5.6,3.1-5.6,3.1l19,19.5l-26.3,25.6l-1.5-1.6c-1.4-1.4-3.6-1.4-5-0.1l-39.3,38.3c-1.4,1.4-1.4,3.6-0.1,5l14.4,14.8
c1.4,1.4,3.6,1.4,5,0.1l39.3-38.3c1.4-1.4,1.4-3.6,0.1-5l-1.5-1.6l26.3-25.6l8.3,8.5l-2.8,2.8c-1.4,1.4-1.4,3.6-0.1,5l6.7,6.9
c1.4,1.4,3.6,1.4,5,0.1l17.3-16.9C263.3,36.5,263.4,34.3,262,32.9z"></path>
</g>
</svg>
Run Code Online (Sandbox Code Playgroud)
我正在尝试将多个引用转发到多个子 DOM 节点:
我需要对 7 个按钮的引用,以便我可以管理它们之间的焦点。
我尝试使用一个数组,React.createRef()
然后使用index将此数组的每个元素附加到子元素,但所有引用都指向最后一个按钮。
为什么?还有其他解决方案吗?
class RestaurantsList extends Component {
references = Array(7).fill(React.createRef());
render() {
return (
<ul
id="restaurants-list"
role="menu"
>
{
this.props.restaurants.map((restaurant, index) => {
return (
<Restaurant
ref={this.references[index]}
name={restaurant.name}
/>
);
})
}
</ul>
);
}
}
const Restaurant = React.forwardRef((props, ref) => {
return (
<li>
<button
ref={ref}
>
{name}
</button>
</li>
);
})
Run Code Online (Sandbox Code Playgroud)
我有一组道具,仅在满足特定条件时才需要应用于组件。
所以我将道具分组在一个对象中:
const props = {
a: "",
b: "",
};
Run Code Online (Sandbox Code Playgroud)
然后尝试有条件地将它们应用到组件:
<div {condition && ...props}/>
Run Code Online (Sandbox Code Playgroud)
但是React似乎不允许这样做,那么还有其他方法吗?
在一个弹性容器中,我有5个具有列方向但是在一定宽度的项目我希望每列显示3个并强制其他包装
是否有任何方法可以在没有固定高度的情况下执行此操作?
我的代码:
<div class="container">
<div class="item-1 item">Item 1</div>
<div class="item-2 item">Item 2</div>
<div class="item-3 item">Item 3</div>
<div class="item-4 item">Item 4</div>
<div class="item-5 item">Item 5</div>
</div>
.container {
display: flex;
flex-flow: column wrap;
}
@media (min-width: 30em) {
}
Run Code Online (Sandbox Code Playgroud)
我试图通过将内容的最大高度设置为零来制作手风琴菜单,然后在选中单选按钮时为其指定一个值,但是当我将最大高度设置为 0 时,它会在选项卡下方创建额外的
空间通过将max-height替换为height来删除额外的空间,那么为什么会发生这种情况,这两个属性之间有什么区别?
HTML:
<div class="tab-group">
<div class="tab">
<input type="radio" name="tab" id="first-tab"><!--/radio-->
<label for="first-tab">First Tab</label><!--/label-->
<div class="tab-content">
<p>
Lorem ipsum dolor sit amet
</p>
</div><!--/content-->
</div><!--/.tab-->
<div class="tab">
<input type="radio" name="tab" id="second-tab"><!--/radio-->
<label for="second-tab">Second Tab</label><!--/label-->
<div class="tab-content">
<p>
Lorem ipsum dolor sit amet
</p>
</div><!--/content-->
</div><!--/.tab-->
</div><!--/.tab-group-->
Run Code Online (Sandbox Code Playgroud)
CSS:
.tab-content {
max-height: 0;
overflow: hidden;
transition: max-height .5s linear;
}
input[type="radio"]:checked ~ .tab-content {
max-height: 10em;
}
Run Code Online (Sandbox Code Playgroud)
从MDN 上的示例中,我了解到可以使用如下标题标签为表单添加标题:
<form method="POST">
<h1>Payment form</h1>
<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
<!--Input fields-->
</form>
Run Code Online (Sandbox Code Playgroud)
我的问题:在这样的标签中插入这些介绍性信息(标题<h1>
和)是否有效:<p>
<header>
<form method="POST">
<header>
<h1>Payment form</h1>
<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
</header>
<!--Input fields-->
</form>
Run Code Online (Sandbox Code Playgroud)
如果我有两个元素一起描述一个元素,是否可以在aria-describedby
属性上使用两个id ?
<div id="description-1"></div>
<div id="description-2"></div>
<div aria-describedby="description-1 description-2"></div>
Run Code Online (Sandbox Code Playgroud)
目标功能:
当用户单击按钮时,会显示一个列表。当他在列表外单击时,它会关闭并且按钮应该获得焦点。(遵循可访问性指南)
我试过的:
const hideList = () => {
// This closes the list
setListHidden(true);
// This takes a ref, which is forwarded to <Button/>, and focuses it
button.current.focus();
}
<Button
ref={button}
/>
Run Code Online (Sandbox Code Playgroud)
问题:
当我检查hideList
函数的作用域时,发现ref
除了在 click 事件处理程序内部之外的任何地方都获得了对按钮的正确引用,它是{current: null}
.
控制台输出:Cannot read property 'focus' of null
示例:
https : //codepen.io/moaaz_bs/pen/zQjoLK
- 单击按钮,然后单击外部并查看控制台。
我在MDN上阅读了有关扩展语法的内容,并且它可以与数组和字符串一起使用:
扩展语法允许在可能需要零个或多个参数(用于函数调用)的地方扩展诸如数组表达式或字符串之类的可迭代- mdn.
我很清楚数组.它会将元素扩展为单独的参数.
但我没有找到字符串的例子.
那么,使用扩展语法在函数调用中扩展字符串的规则是什么?
如果字符串字符用空格分隔,因为我试过这个并打印3.
var x = "1 2 3";
console.log(Math.max(...x));
Run Code Online (Sandbox Code Playgroud)
我有这个图像元素:
<img class="cat" src="img/tom.png" alt="Cat">
Run Code Online (Sandbox Code Playgroud)
我想同时删除src
和alt
属性。
我希望removeAttribute()
方法采用多个参数,但事实并非如此。
除了这个重复的代码之外,还有其他方法可以做到这一点:
image.removeAttribute('src');
image.removeAttribute('alt');
Run Code Online (Sandbox Code Playgroud) 我知道这alert()
是JavaScript中的内置函数.
但它是一个函数声明:
function alert() { ... }
Run Code Online (Sandbox Code Playgroud)
或函数表达式?
var alert = function() { ... }
Run Code Online (Sandbox Code Playgroud)
那么,当我们调用它时,我们是使用函数的名称还是变量的名称?同样prompt()
和confirm()
..
提前谢谢.