Question

我试图在状态改变时保持图像重新加载。下面的图像变量被传递到自定义反应组件的道具中 var img = new Image（）;我已经设置了src，title，desc等。

所以我的问题是。在自定义反应组件中，如何获取图像对象（现在是标题为img的道具）并将其显示在渲染函数中？

我已经尝试了

render: function(){
  return <div>{this.props.img}</div>
}

但是我一直得到一个DOM元素不是React组件错误的孩子。

Answer 1

我认为你要做的是创建一个新的Image类型的DOMNode，并将其呈现为<div>的孩子。如果这是对的，那么你正在做一些React不能做的事情。两个选项：

选项1（最佳）：在React组件模板中渲染图片标记

render: function() {
    return (
        <div>
            <img src={'url-to-your-image'} />
        </div>
    );
}

选项2（不太好）：将图像渲染为HTML字符串实体

renderHTML: function() {
    return {
        __html : '<img src="url-to-your-image" />'
    }
},

render: function() {
    return (
        <div dangerouslySetInnerHTML={this.renderHTML()} />
    );
}

希望有所帮助！

Answer 2

Image构造函数返回一个HTMLImageElement接口。

因此，要渲染您所说的img道具是使用var img = new Image()创建的，基本上必须创建一个元素并进行渲染。

您可以通过JSX

const YourComponent = ({img}) => <img src={img.src} alt="foo" />

或

如果需要以编程方式使用React.CreateElement语法。

const YourComponent = ({img}) => {

  const myImage = React.createElement("img", {
     src: img.src,
     // any other image attributes you need go here
  }, null);

  return (
    {myImage}
  );
}

如何在

2 个答案: