时间戳

首页 > 解决方案 > 如何访问对象内的图像链接并使用反应组件显示它

javascript - 如何访问对象内的图像链接并使用反应组件显示它

问题描述

我有一个包含这种格式数据的对象（称为 opp）

  {"randomtext"},
  { "randomtext"}, 
  {flag: "imagelink" , rand1: 23}, 
  {"randometext"}

我正在尝试访问标志属性中的值，并在反应组件的帮助下显示它

我的预期结果应该是

<img src=" value in flag property"/>

到目前为止，我已经想出了这个

class App extends React.Component {
   
      render() {
       
        return (
          <div> 
          {opp.map(item => <Card  value={item} src={item.flag}/>)}
          </div>
        );
      }
    }
        ReactDom.render(<App />, document.getElementById("container1"));

下面的代码保存在另一个文件中

class Card extends React.Component {   
  render() {
    return (
      <div>
      <h1>{this.props.value}</h1>
           <img src={this.props.src}/>
           </div>
    
    );
  }
}
export default Card;

但是每当我运行它时，它都会返回一个反应错误说"objects are not valid as a react child (found: object with keys { flag, rand1}). if you meant to render a collection of children, use an array instead"

ps：为了可读性，会接受对这篇文章的编辑

标签： javascriptreactjs

解决方案

Item 是您传递给卡片组件的整个对象，并且您试图在h1 tag卡片组件中呈现为值。您应该在 h1 中显示对象的某些属性值。例如，这this.props.value[0]将显示 h1 中的第一个属性值。

class Card extends React.Component {   
  render() {
    return (
      <div>
      <h1>{this.props.value[0]}</h1>
           <img src={this.props.src}/>
           </div>
    
    );
  }
}
export default Card;

推荐阅读