無法識別 React 組件導入

Question

我正在嘗試使用這個寶石：

http://kyleamathews.github.io/react-component-gallery/

所以我使用npm安裝了它

npm install react-component-gallery

我創建了一個這樣的 React 組件：

var Gallery = React.createClass({

  render: function() {
    return (

  <ComponentGallery
    className="example"
    margin=10
    noMarginBottomOnLastRow=true
    widthHeightRatio=3/5
    targetWidth=250>
      <img src="https://example.com/pic1.jpg" />
      <img src="https://example.com/pic2.jpg" />
      <img src="https://example.com/pic3.jpg" />
      <img src="https://example.com/pic4.jpg" />
      <img src="https://example.com/pic5.jpg" />
      <img src="https://example.com/pic6.jpg" />
      <img src="https://storage.googleapis.com/relaterocket-logos/nike.com-black@2x.png" />
      <img src="https://storage.googleapis.com/relaterocket-logos/gopro.com-black@2x.png" />
    </ComponentGallery>
    );
  }

});

但是我收到此錯誤：

JSX value should be either an expression or a quoted JSX t
ext (10:11)

第 10 行是這樣的：

margin=10

為什么會出現這種情況？

Answer 1

JSX 類似於 XML。 您的屬性值需要是帶引號的字符串、表達式或其他 JSX 元素。 在你的情況下，例如

margin="10"
noMarginBottomOnLastRow={true}

（第二個可能是"true" ，只是給出一個表達式的例子。）