Question

我一直在开发照片库应用程序，并使用HTML和CSS设置了基本结构。 现在，我想使用React渲染照片，但是我无法为包含照片的每个div赋予唯一的className（我想将第1个照片className =“ item item-1”设置为第2个照片className = item item-2“等。）我是编码新手，尤其是React经验不足的人，因此所有建议对您都有很大帮助！

在PhotoItem.jsx上，如何将this.key值添加到className？

还可以，当前渲染的结构（index.jsx-> App.jsx-> PhotoList.jsx-> PhotoItem.jsx）还可以吗？

这是我要复制的结构（我仅使用HTML和CSS制作）。

这是我的HTML：

window.addEventListener('popstate', function (e) {
    if (e.state!=null) {
        $("#container").html(e.state);
    }
    else {
        //load the partialpage into the container(a full html page is not returned by the ajax query for my site)
        $.ajax({
            url: location.href,
            type: "GET",
            success: function (data) {
                $('#container').html(data);
            }
         });
    }
});

这是我的styles.css：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="photos">
    Hello World
  </div>
  <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

这是我的index.jsx：

#photos-gallery {
  height: 275px;
  width: 634px;
}

.photos-gallery-header {
  border-bottom: 1px solid #e1e1e1;
  color: #333;
  display: flex;
  font-size: 24px;
  font-weight: bold;
  justify-content: space-between;
  line-height: 32px;
  margin: 0 0 16px;
  padding-bottom: 16px;
}

.photos-gallery-content {
  display: grid;
  grid-template-columns: 20% 50% 15% 15%;
  grid-column-gap: 0;
  grid-row-gap: 0;
  height: 200px;
}   

.photos-gallery-content .item {
  box-shadow: inset 0 0 0 1px #000;
  overflow: hidden;
}

.photos-gallery-content .item-1 {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
}

.photos-gallery-content .item-2 {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 2;
  grid-row-end: span 2;
}

.photos-gallery-content .item-3 {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: span 3;
}

这是我的App.jsx：

import App from './components/App.jsx'

ReactDOM.render(<App />, document.getElementById('photos'));

这是我的PhotoList.jsx：

import React from 'react';
import PhotoList from './PhotoList.jsx';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      photos: [
        "https://i.imgur.com/8pTwPlXb.jpg",
        "https://i.imgur.com/OPAR3PCb.jpg",
        "https://i.imgur.com/A8eQsll.jpg",
        "https://i.imgur.com/2cGhWubb.jpg",
        "https://i.imgur.com/KhYHiPYb.jpg",
        "https://i.imgur.com/1KSodpOb.jpg",
        "https://i.imgur.com/WdlOxaxb.jpg",
        "https://i.imgur.com/ZtHebw9b.jpg",
        "https://i.imgur.com/oqJCGvTb.jpg"

      ]
    }
  }
  render() {
    return (
      <div className="photos-gallery">
        <h2 className="photos-gallery-header"> 9 Photos </h2>
        <PhotoList photos={this.state.photos} />
      </div>
    )
  }
}

export default App;

这是我的PhotoItem.jsx：

import React from 'react';
import PhotoItem from './PhotoItem.jsx';

var PhotoList = (props) => {
  return (
    <div className="photos-gallery-content">
      {props.photos.map(photo => 
        <PhotoItem key={props.photos.indexOf(photo)} photo={photo} />
      )}
    </div>
  )
}
export default PhotoList;

Answer 1

this.key没有任何意义。只需将索引作为道具传递给组件并使用它即可。

{ props.photos.map((photo, index) =>
  <PhotoItem key={index} index={index} photo={photo} />
)}

-

const PhotoItem = ({index, photo}) => {
  return (
    <div className='item item-`${index}`'>
      <div className='photo'>
        <img src={photo} />
      </div>
    </div>
  )
};

Answer 2

这是设计使然。 React团队决定不允许用户使用特定于React的道具，例如key和ref。

您可以在此处了解更多信息：https://github.com/facebook/react/issues/2429

因此，请使用另一个道具名称，例如index（由Tyler建议）或className本身。

<PhotoItem key={index} className={index} photo={photo} />

const PhotoItem = ({className, photo}) => {
   return (
      <div className={`item item-${className}`}>

反应：在渲染时，给每个div唯一的className

2 个答案: