他のコンポーネントのマップからdivデータを渡す

Question

私は、カルーセルコンポーネントを使用してテストコンポーネントを作成しています。
私は小道具からのデータで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

正規JavaScriptのコメントはJSXで許可されていません。

//<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をpropsとして渡すコードを提供できる場合は、解決策を見つけることができます。

Answer 3

私はついにこの問題を起こしました。私はそれがページにコンポーネントが描画されるたびに示したしまいます

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

として静的データを使用しています最初のケースで 。 しかし、後者の場合にはテストデータをAPIによって設定されている

const { testData } = this.props; 

は、コンポーネントが、私はこの

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

は、今では

正常に動作しているんでした。この問題を解決するfirst.Toレンダリングするとき、それがフェッチ得ることはありませんcall.So