为什么我的三元运算符不在 Jsx 中工作？

Question

我对代码中的 "className={obj.id === id ? "panel active" : "panel"}" 有疑问。

这个项目是当我点击其中一张图片时，它会拉伸。

我想在第一个加载页面上显示第一张图片，如果我点击其中一张图片，然后显示另一张图片。

如何在三元运算符中选择第一个孩子？

我试过“panel active:fistChild”，但我想不通。

我的代码是

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
   const [obj] = useState([
        {
          id: 1,
          backgroundImage:
            "https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
        },
        {
          id: 2,
          backgroundImage:`enter code here`
            "https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
        },
        {
          id: 3,
          backgroundImage:
            "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80",
        },
      ]);

      const [id, setId] = useState(0);

      const onclick = (id) => {
        setId(id);
      };

      return (
        <div className="container">
          {obj.map((obj) => {
            return (
              <div
                className={obj.id === id ? "panel active" : "panel"}
                onClick={(e) => onclick(obj.id)}
              >
                <img src={obj.backgroundImage} alt="" />
              </div>
            );
          })}
        </div>
      );

Answer 1

第一个元素的ID是1：

   const [obj] = useState([
        {
          id: 1,

所以这就是你应该使用的初始状态：

const [id, setId] = useState(1);

或

const [id, setId] = useState(obj[0].id);

function App() {
   const [obj] = React.useState([
      {
        id: 1,
        backgroundImage:
          "https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
      },
      {
        id: 2,
        backgroundImage:"https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
      },
      {
        id: 3,
        backgroundImage:
          "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80",
      },
    ]);

    const [id, setId] = React.useState(1);

    const onclick = (id) => {
      setId(id);
    };

    return (
      <div className="container">
        {obj.map((obj) => {
          return (
            <div
              className={obj.id === id ? "panel active" : "panel"}
              onClick={(e) => onclick(obj.id)}
            >
              <img src={obj.backgroundImage} alt="" />
            </div>
          );
        })}
      </div>
    );
}

ReactDOM.render(<App />, document.querySelector('.react'));

.active {
  border: 5px solid blue;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

不过，只使用图像的索引可能更有意义。此外，无需为obj 调用useState（这实际上是一个数组——最好正确调用数据结构以避免混淆自己）。如果每个组件都不是动态的（例如来自道具），请将其完全移出组件。

const images = [
     "https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
     "https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
     "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80",
    ];
function App() {
    const [activeIndex, setActiveIndex] = React.useState(0);

    const onclick = (id) => {
      setId(id);
    };

    return (
      <div className="container">
        {images.map((image, index) => {
          return (
            <div
              className={index === activeIndex ? "panel active" : "panel"}
              onClick={(e) => setActiveIndex(index)}
            >
              <img src={image} alt="" />
            </div>
          );
        })}
      </div>
    );
}

ReactDOM.render(<App />, document.querySelector('.react'));

.active {
  border: 5px solid blue;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>