小编Moa*_*nas的帖子

如何将变换原点设置为元素上的特定点?

在这个例子中,我想从底部旋转锤子,所以有没有办法准确知道元素上特定点的正确坐标,还是应该随机尝试不同的点?

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)

css svg css-transforms

7
推荐指数
1
解决办法
1904
查看次数

React:如何将引用转发给多个孩子?

我正在尝试将多个引用转发到多个子 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)

reactjs

7
推荐指数
1
解决办法
8837
查看次数

如何有条件地将一组道具添加到反应组件中?

我有一组道具,仅在满足特定条件时才需要应用于组件。
所以我将道具分组在一个对象中:

const props = {
  a: "",
  b: "",
};
Run Code Online (Sandbox Code Playgroud)

然后尝试有条件地将它们应用到组件:

<div {condition && ...props}/>
Run Code Online (Sandbox Code Playgroud)

但是React似乎不允许这样做,那么还有其他方法吗?

javascript reactjs

7
推荐指数
1
解决办法
3267
查看次数

如何控制flexbox中每列的项目数?

在一个弹性容器中,我有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)

js Bin:http://jsbin.com/fesujifelu/edit?html,css,output

html css css3 flexbox css-grid

5
推荐指数
1
解决办法
5031
查看次数

高度和最大高度有什么区别?

我试图通过将内容的最大高度设置为零来制作手风琴菜单,然后在选中单选按钮时为其指定一个值,但是当我将最大高度设置为 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)

手风琴菜单

html css

5
推荐指数
2
解决办法
2万
查看次数

我可以在 &lt;form&gt; 元素中插入 &lt;header&gt; 吗?

从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)

html forms

5
推荐指数
1
解决办法
5263
查看次数

我可以使用aria- describeby引用多个元素吗?

如果我有两个元素一起描述一个元素,是否可以在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)

accessibility wai-aria web-accessibility

5
推荐指数
1
解决办法
1461
查看次数

ref 在事件处理程序中没有值

目标功能:
当用户单击按钮时,会显示一个列表。当他在列表外单击时,它会关闭并且按钮应该获得焦点。(遵循可访问性指南)

我试过的:

  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
- 单击按钮,然后单击外部并查看控制台。

ref forward-reference reactjs

4
推荐指数
1
解决办法
1324
查看次数

字符串的传播运算符

我在MDN上阅读了有关扩展语法的内容,并且它可以与数组和字符串一起使用:

扩展语法允许在可能需要零个或多个参数(用于函数调用)的地方扩展诸如数组表达式或字符串之类的可迭代- mdn.

我很清楚数组.它会将元素扩展为单独的参数.
但我没有找到字符串的例子.

那么,使用扩展语法在函数调用中扩展字符串的规则是什么?
如果字符串字符用空格分隔,因为我试过这个并打印3.

var x = "1 2 3";
console.log(Math.max(...x));
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-6 spread-syntax

3
推荐指数
2
解决办法
2922
查看次数

如何从节点中删除多个属性?

我有这个图像元素:

<img class="cat" src="img/tom.png" alt="Cat">
Run Code Online (Sandbox Code Playgroud)

我想同时删除srcalt属性。
我希望removeAttribute()方法采用多个参数,但事实并非如此。

除了这个重复的代码之外,还有其他方法可以做到这一点:

image.removeAttribute('src');
image.removeAttribute('alt');
Run Code Online (Sandbox Code Playgroud)

javascript nodes

3
推荐指数
2
解决办法
3130
查看次数

"JavaScript alert()函数"是函数声明还是函数表达式?

我知道这alert()是JavaScript中的内置函数.
但它是一个函数声明:

function alert() { ... }
Run Code Online (Sandbox Code Playgroud)

或函数表达式?

var alert = function() { ... }
Run Code Online (Sandbox Code Playgroud)

那么,当我们调用它时,我们是使用函数的名称还是变量的名称?同样prompt()confirm()..
提前谢谢.

javascript

-1
推荐指数
1
解决办法
44
查看次数