Question

HeJ小鼠，因为我是React的初学者。我有一个显示从状态传递到组件的图像的问题。

App.js

this.state = {
    projects: [
    title: 'xxx',
    image: require(../src/img/landscape.jpg)
    ]
}

<Works projects={this.state.projects}/>

Work.jsx

{this.props.project.title}
{this.props.project.image}

标题显示没有任何问题，但图像没有出现。我需要以另一种方式绑定它吗？

Answer 1

您的状态是否与您提出的问题相同或者是这样？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section id="raised-section" class="main main-raised">
  <div class="container">
    <div class="text-section text-center">
      <div class="row">
        <div class="col-md-offset-2 col-md-8 pos-center">
          <h1 class="ft-roboto" style="font-weight: 800; color: #3C4858;">Sample Heading</h1>
          <p class="ft-raleway" style="font-size: 1.15em; color: #999;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
    </div>
  </div>
</section>

至少使用您的代码，您应该看到图像的路径。但是，如果您想要查看图像，则需要使用state = { projects: [ { title: "xxx", image: require( "../src/img/landscape.jpg" ), }, ], }。

<img>

Answer 2

首先，状态必须这样写：

state = {
    projects: [
        { title: 'xxx',
          image: require("../src/img/landscape.jpg")
        }
    ]
}

现在work.js将包含以下代码：

<div>
    {this.state.projects.map((item, index) => {
        return (
            <div key={index}>
                <p>{item.title}</p>
                <img src={item.image} />
            </div>
        )})
    }
</div>

React，将图像从this.state传递给组件

2 个答案: