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

Question

我正在使用 Carousel 组件创建测试组件。
在 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>*/ }