小编Jih*_*ada的帖子

React.js:是否可以将react组件转换为HTML DOM?

我正在开发一个基于地图的应用程序,该应用程序使用Google Map API在React.js中创建标记及其信息窗口.在infowindow.setContent()仅接受或者是StringHTML.我无法传入,String因为我button链接到另一个反应组件中的特定方法(类似于:) _this.props.addList(place).因此,我必须将参数填充为HTML DOM,如下面的代码行:

var div = document.createElement('div');
var title = document.createElement('h4');
title.innerHTML = place.name;

var btn = document.createElement('button');
btn.className = 'btn btn-danger btn-block';
btn.appendChild(document.createTextNode('I want to go here !!'));

div.appendChild(title).appendChild(btn);

google.maps.event.addListener(marker, 'click', function() {

  infowindow.setContent( div );
  infowindow.open(map, this);
});

btn.addEventListener('click', function() {
  _this.props.addList(place);
});
Run Code Online (Sandbox Code Playgroud)

这些代码对我有用,但我不想一个一个地创建元素.我也尝试用React组件传递参数,但它似乎不起作用:

createMarker: function() {
  
  /** Some other lines of code */

  var _this = this;

  google.maps.event.addListener(marker, 'click', function() {

    infowindow.setContent( _this._renderInfoWindow(place) ); …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

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

Typescript 部分但不是完整的对象本身

假设我有一个对象:

\n
type Obj = { a: string, b: string, c: string }\n
Run Code Online (Sandbox Code Playgroud)\n

通过Partial<T>,TS 为您提供对象属性的所有可能组合,包括对象的完整形式。就我而言,我想排除完整的对象(如果可能的话,也排除空的对象)。

\n

所以我想要:

\n
{} // \xe2\x9d\x8c\n{ a: string } // \xe2\x9c\x85\n{ b: string } // \xe2\x9c\x85\n{ c: string } // \xe2\x9c\x85\n{ a: string, b: string } // \xe2\x9c\x85\n{ a: string, c: string } // \xe2\x9c\x85\n{ a: string, b: string, c: string } // \xe2\x9d\x8c\n
Run Code Online (Sandbox Code Playgroud)\n

我怎样才能做到这一点?

\n

typescript mapped-types

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

CSS3 变换比例覆盖了悬停时的另一个元素

我有一个博客元素,它有 2 个子元素:.blog-header(包含背景图像)和 .blog-body。当将鼠标悬停在 .blog-header 上时,我希望图像能够完美缩放。但问题是:图像占据了 .blog-body 应该放置的空间

这是我的代码:

.blog {
  background: white;
  margin-top: 20px;
  border-top: 3px primary solid;
  border-bottom 3px solid #eee;
}
.blog .blog-header {
  overflow: hidden;
  z-index 90;
}
.blog .blog-header .blog-bg-header {
  height: 275px;
  background-position: center;
  background-size: cover;
  transition: 0.25s ease-in-out;
}
.blog .blog-header .blog-bg-header:hover {
  cursor: pointer;
  transform: scale(1.3);
}
.blog-body {
  margin: -60px 20px 0 20px;
  padding: 20px 20px 10px 20px;
  background: white;
  z-index 100;
}
Run Code Online (Sandbox Code Playgroud)
<article class="blog">
  <header class="blog-header">
    <div class="blog-bg-header" style="background-image: url('http://placehold.it/1350x750')"></div> …
Run Code Online (Sandbox Code Playgroud)

css scale hover css-transforms

0
推荐指数
1
解决办法
3559
查看次数