Question

我正在使用Carousel组件创建Test组件在Carousel组件中，我使用来自props的数据传递div。但是我想从testData props传递img src，如下所示。

export default class Test extends Component {
    render() {

        const { testData } = this.props;
        return (
                <div>
                        <Carousel>
                        {
                            testData.length && testData.map((a) => (
                                    <div><img src=
                                        {a.link} />
                                    </div>

                                )
                            )
                        }



                        </Carousel>

            </div>

        );
    }
}

testData = [{"link":"/test1.jpg"},
{"link":"/test2.jpg"},
{"link":"/test3.jpg"}
]

当我按照以下方式执行此操作时，它工作正常。

 <div> <img src="/test1.jpg" /></div>
 <div> <img src="/test2.jpg" /></div>
 <div> <img src="/test3.jpg" /></div>

使用testData我做错了什么。

Answer 1

JSX中不允许使用常规JavaScript注释：

//<div> <img src="/test1.jpg" /></div>
//<div> <img src="/test2.jpg" /></div>
//<div> <img src="/test3.jpg" /></div>

要在JSX中发表评论，您必须打包{ }。

{ /*<div> <img src="/test1.jpg" /></div>
<div> <img src="/test2.jpg" /></div>
<div> <img src="/test3.jpg" /></div>*/ }

Answer 2

import React, { Component } from 'react'
import {Carousel} from 'react-bootstrap'

export default class Test extends Component {
render() {
    const testData = [{"link":"/test1.jpg"},
                      {"link":"/test2.jpg"},
                      {"link":"/test3.jpg"}]
    return (
        <Carousel>
         {testData.length && testData.map((a) => 
            (<div>
               <img src={a.link} />
             </div>))}

         </Carousel>
    );
  }

}

这段代码工作正常，所以我认为问题在于你如何通过道具传递testData。

如果您可以提供将testData作为道具传递的代码，则可以找到解决方案。

Answer 3

我终于得到了这个问题。在第一种情况下，我使用静态数据

testData = [{"link":"/test1.jpg"},
{"link":"/test2.jpg"},
{"link":"/test3.jpg"}
]

每次渲染组件时都会显示页面。但在第二种情况下

const { testData } = this.props;

testData是由API调用设置的。因此，首先渲染组件时不会获取它。要解决此问题，我这样做了

if (!caurosalData.length) {
            return null;
        }

现在工作正常

从其他组件中的map传递div数据

3 个答案: