小编Pat*_*nik的帖子
使用 React 和 SSR 增加元素 Id (next.js)
我有这样的js代码：
let idCounter = 0;
export default class TestComponent extends Component {
constructor(props) {
super(props);
this.uniqueId = `TestComponent-${idCounter++}`;
}
render() {
return (<div id={this.uniqueId> Some content </div>);
}
}
我需要为每个渲染元素拥有唯一的 ID，所以我对它们进行计数。但我有 Next.js 的 SSR。当页面在服务器上初始化时，由于服务器渲染，idCounter 会增加几次。
然后普通浏览器尝试渲染此组件，从 idCounter 从 0 开始并替换服务器端渲染的 id（例如“TestComponent-5”到“TestComponent-0”）。我最终在控制台中出现错误：
“警告：Prop
id不匹配。服务器：“TestComponent-5”客户端：“TestComponent-0””
我不知道该怎么处理。有任何想法吗？
推荐指数
解决办法
查看次数
Npm 没有看到最新的 npm 包版本
干草，
我在子依赖项方面遇到了一些大问题。
我有使用react-is包的react-test-renderer包。
问题就从这里开始。因为react-是想安装在16.3.1版本上
但是当我只想安装“react-is@16.3.1”时，npm 告诉我软件包版本不存在：
还尝试了“ npm view react-is ”命令来查看该版本是否已经存在：
最有趣的是，当我去npmjs.com页面查找react-is版本时，有一个8小时前发布的版本16.3.1：
当我输入npm install命令时，我收到一个关于不存在的 React-is 版本的错误：
当我使用纱线安装时，我可以简单地选择现有版本，一切正常：
但我不能在生产中使用纱线，我需要通过使用 npm 以某种方式解决它。
也许你有什么想法，我应该如何解决这个问题？
推荐指数
解决办法
查看次数
为 Selenium 测试的 React 组件生成 id
我想id为网站中的几乎每个元素生成 ，以便更轻松地处理 Selenium 测试的元素。这是一个好方法吗？我的应用程序发生了很大变化。
我似乎无法将idHTML 属性添加到 React 组件，因为 React 将其解释为 props，例如
<NewEl id='test'/>
...并NewEl获取id道具而不是属性。有时我无法访问React组件，因为我使用了第三方组件。
我应该如何更改该id属性？我的方法是一个好的解决方案吗？
推荐指数
解决办法
查看次数
更改 chrome 中给定 url 的 http 响应状态代码
我想从后端模拟假 404 状态代码，以查看我的网站的行为方式。
我不想在我想使用一些工具的代码中模拟假响应状态。
因为有时我想在版本 x 的产品上测试它，我不想浪费时间下载此代码并检查它是否正常工作。
只需简单地模拟一些测试值的响应标头状态代码，例如 404 以进行快速检查。
我尝试使用像 Requestly 这样的软 - chrome 扩展。
并将其配置为：
修改 google.com 站点的标头状态放置值 404 的响应。
但是当我打开 google.com 网站时，我的状态为 200：
您知道如何更改给定请求的状态代码吗？也许通过使用不同的软？
推荐指数
解决办法
查看次数
网格项根据需要占用尽可能多的空间
我想创建视图如下：
我只能使用它来实现网格视图功能（没有弹性盒）。
现在我已经准备了网格，例如：
.item1 { grid-area: left; }
.item2 { grid-area: right; }
.item3 { grid-area: content; }
.grid-container {
display: grid;
grid-template-areas:
'left right'
'content content';
grid-gap: 5px;
background-color: #2196F3;
padding: 5px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 5px 0;
font-size: 30px;
}<div class="grid-container">
<div class="item1">left</div>
<div class="item2">right</div>
<div class="item3">content</div>
</div>这是js小提琴： https: //jsfiddle.net/d32phsyu/3/
我有左侧、右侧和内容网格模板区域。
问题是我希望左侧区域仅占用与其内容一样多的空间（如内联块），而右侧区域则占用所有其他空间。
是否可以不说还需要占用多少像素？
如果是，那么如何实现呢？
推荐指数
解决办法
查看次数
Promise.resolve vs resolve
干草,我有这个代码:
var promise1 = new Promise(function(resolve, reject) {
setTimeout(() => {
console.warn('Elo');
resolve('First response');
},
1000);
})
promise1
.then((resp) => {
console.warn('First then!');
});
并且它在一秒钟之后解决了承诺和控制台.警告'首先然后!'.
但是当我换线时:
resolve('First response');
对于
Promise.resolve('First response');
它不会起作用.有些想法为什么？
也试过了
return Promise.resolve('First response');
但它也行不通.我不知道为什么.
你能帮我理解吗？
推荐指数
解决办法
查看次数