我正在尝试创建一个php库,这就是为什么我需要一个好的Mask,以后可以显示图片.我希望Mask不要大于屏幕大小.我的意思是,必须没有滚动,整体<body>需要只有浏览器窗口的宽度和高度,这样每个子对象<body>都限制在浏览器的帧大小,如果溢出则会缩小.我试着max-width和max-height上<body>,但它不工作.
这是我的代码:
index.html的:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mother">
<div id="header">
<div id="back-link">
<a href="../">Home</a>
</div>
<div id="prev">
<a href="">next picture</a>
</div>
<div id="next">
<a href="">previous picture</a>
</div>
<div id="headline">
<p class="h2">Our Galery</p>
</div>
</div>
<!-- Content -->
<div id="container-bild">
<img src="./bilder/P1130079.JPG" id="img-bild" />
</div>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
style.css中:
body {
max-width: 100%;
max-height: 100%;
}
/* mother-container */
div#mother {
max-width: 100%;
max-height: …Run Code Online (Sandbox Code Playgroud) 我有一个如下所示的 React 组件(省略了某些部分),并且我使用 redux 进行状态管理。该getRecentSheets操作包含 AJAX 请求并将响应分派给 redux,后者会state.sheets.recentSheets使用响应的数据进行更新。
所有这些都按预期工作,但在构建时会抛出有关useEffect 缺少依赖项的警告: 'getRecentSheets'。但是,如果我添加getRecentSheets到 useEffect 的依赖项数组,它就会开始无限期地重新运行,从而冻结应用程序。
useEffect我已阅读有关挂钩的 React 文档https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependency但它没有没有为此类用例提供一个很好的示例。我想这是 useCallback 或 react-redux useDispatch 的东西,但没有例子我不知道如何实现它。
有人可以告诉我在 useEffect 中使用 redux 操作的最简洁和惯用的方法是什么以及如何避免有关缺少依赖项的警告吗?
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import SheetList from '../components/sheets/SheetList';
import { getRecentSheets } from '../store/actions/sheetsActions';
const mapStateToProps = (state) => {
return {
recentSheets: state.sheets.recentSheets,
}
}
const mapDispatchToProps = (dispatch) => {
return …Run Code Online (Sandbox Code Playgroud)