我是React的新手。我有一个用于渲染图像的功能组件,以及作为道具传递给该组件的图像的某些属性。渲染图像时出错,我想更新图像源。我还想更新父组件的state属性,并将其传递回父组件。我不确定如何实现相同的目标。为了实现这一目标,我已经奋斗了很长时间。请有人帮我解决这个问题。提前非常感谢。
import React, { useState } from 'react';
import PropTypes from 'prop-types';
const ImageRenderer = props => {
const [assetInfo, setAssetInfo] = useState(props); //assetInfo contains asseturl, type, name, type of the image, isAssetPublished
return(
<div id="asset-img">
<p> Name: {assetInfo.assetInfo.name} </p>
<p> Type: {assetInfo.assetInfo.type} </p>
<p> Url: {assetInfo.assetInfo.assetUrl} </p>
<img src={assetInfo.assetInfo.assetUrl} alt="name" onError={e => {
setAssetInfo(assetInfo => {
return { ...assetInfo, assetUrl: 'https://example.com/404-placeholder.jpg' } //would like to update the asset url to 404 and also set isAssetPublished to false and pass it back to parent to update parent state
});
}}/>
</div>
)
}
ImageRenderer.propTypes = {
assetInfo:PropTypes.object.isRequired
};
export default ImageRenderer;
挂钩是React 16.8中的新增功能。它们使您无需编写类即可使用状态和其他React功能。
这是链接https://reactjs.org/docs/hooks-state.html