无法识别 React 组件导入

Question

I am trying to use this gem:

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

So I installed it using npm

npm install react-component-gallery

And I created a React component like this:

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>
    );
  }

});

However I am getting this error:

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

Where line 10 is this:

margin=10

Why is this occurring?

Answer 1

JSX is XML-like. Your attribute values need to be quoted strings, expressions, or other JSX elements. In your case, eg

margin="10"
noMarginBottomOnLastRow={true}

(The second could be "true" , just giving an example of an expression.)