我创建了一个React组件,用于加载图像并确定图像是否成功加载.
import React from 'react';
import PropTypes from 'prop-types';
import { LOADING, SUCCESS, ERROR } from '../helpers';
class Image extends React.Component {
static propTypes = {
onError: PropTypes.func,
onLoad: PropTypes.func,
src: PropTypes.string.isRequired,
}
static defaultProps = {
onError: null,
onLoad: null,
}
constructor(props) {
super(props);
this.state = { imageStatus: LOADING };
this.initImage();
}
componentDidMount() {
this.image.onload = this.handleImageLoad;
this.image.onerror = this.handleImageError;
this.image.src = this.props.src;
}
initImage() {
this.image = document.createElement('img');
this.handleImageLoad = this.handleImageLoad.bind(this);
this.handleImageError = this.handleImageError.bind(this);
}
handleImageLoad(ev) {
this.setState({ …我有一个关于Flow的一般问题.
我目前使用React的prop-types库来定义组件prop类型.这些检查从生产代码中删除,因此来自外部源的数据仍然可能导致脚本崩溃.
<Foo bar={i} />
示例:假设我有一个组件Foo,它具有bar的属性,其类型为prop.当我正在编码时,如果我试图意外地将字符串传递给Foo的条形支柱,我会收到通知.但是,一旦代码生效,该健全性检查将被删除.
Flow是否保留在生产代码中？我的意思是,继续上面的例子,如果我使用Flow,如果有人试图将字符串传递给Foo的bar属性,Flow会在运行时抛出错误吗？
首先,我来自PHP背景(这个问题可能很明显).这是在PHP中完成的一项简单任务,但我对如何使用jsp实现这一点感到非常困惑.
这是我在服务器上的文件夹结构:
/home +
|
+-/user-+
|
+-/includes+
| |
| +/footer.jsp
|
+-/public_html+
|
+/index.jsp
public_html是Apache Tomcat服务的目录.因此,如果有人浏览我的域(sampledomain.com),他们会看到index.jsp
我不希望直接通过网络访问"footer.jsp".因此,它位于includes目录中,该目录位于"index.jsp"上方的一个目录中.您可以在浏览器中键入直接到达footer.jsp的URL.
这是footer.jsp的内容
<div id="footer">
<p>This is a footer</p>
</div>
这是index.jsp的内容
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Hello World</h1>
<%@ include file="../includes/footer.jsp" %>
</body>
</html>
我收到一个tomcat错误,说无法找到文件"/../includes.footer.jsp".如何包含网页的public_html目录之外的文件.
在PHP中,我只是这样做
<?php include("../includes/footer.php") ?>
我尝试在react中实现一个简单的轮播，我使用了纯css和库，但在所有情况下它总是显示如下
所有子项均以垂直线显示。
我尝试使用以下代码：
https://www.npmjs.com/package/react-responsive-carousel
https://www.npmjs.com/package/pure-react-carousel
总而言之，结果是相同的，我在 css 类中没有样式
import React, {Component} from 'react';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext }
from 'pure-react-carousel';
class App extends Component {
render() {
return (
<div className="App">
<CarouselProvider
naturalSlideWidth={30}
naturalSlideHeight={10}
totalSlides={3}
>
<Slide index={0}>
<img src="/img/Gallery01.png" />
</Slide>
<Slide index={1}>
<img src="/img/Gallery01.png" />
</Slide>
<Slide index={2}>
<img src="/img/Gallery01.png" />
</Slide>
</CarouselProvider>
</div>
);
}
}
export default App;
reactjs ×3
javascript ×2
css ×1
enzyme ×1
flowtype ×1
html ×1
include ×1
jestjs ×1
jsp ×1
unit-testing ×1