如何在反应中的兄弟姐妹之间切换

Question

考虑我有一个这样的 App 组件：

import React from "react";

import Component from "./component";

function App() {

    const array = [

        { key : 1 } , { key : 2 } , { key : 3 } , { key : 4 }

    ]

  return (

    <div>

        {array.map( (item) => {

            <Component key={item.key} />

        })}

    </div>

  );

}

export default App;

组件是：

import React , { useState } from "react";

function Component() {

    const [ style , setStyle ]= useState({

        height:"50px",width:"50px",backgroundColor:"blue"

    });

  return (

    <div style={style} onclick={} >

        Content

    </div>

  );

}

export default Component;

这将创建一个 App div，其中将有四个子 div 元素。

我想要的是; 每当我单击其中一个内部 div 时，其余三个 div 必须将其颜色更改为红色。不是一次，而是每次我单击四个中的任何一个时。

Answer 1

添加一个状态来存储点击的（或者说，当前选择的）divimport React, { useState } from "react";import Component from "./component";function App() {&nbsp; &nbsp; const [selectedDiv, setSelectedDiv] = useState(-1);&nbsp; &nbsp; const array = [&nbsp; &nbsp; &nbsp; &nbsp; { key : 1 } , { key : 2 } , { key : 3 } , { key : 4 }&nbsp; &nbsp; ]&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; {array.map( (item) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Component key={item.key} clickHandler={() => {setSelectedDiv(item.key)}} isColoured={(selectedDiv === item.key || selectedDiv < 0) ? false : true} />&nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; </div>&nbsp; );}export default App;现在Component，检查isColoured道具，如果是true，应用颜色，否则不要。import React from "react";function Component(props) {&nbsp; return (&nbsp; &nbsp; <div onClick={props.clickHandler} style={props.isColoured ? {height:"50px",width:"50px",backgroundColor:"red"} : null}>&nbsp; &nbsp; &nbsp; &nbsp; Content&nbsp; &nbsp; </div>&nbsp; );}export default Component;

Answer 2

试试这个方法，跟踪状态中选定的 div（使用 id）并Component根据状态中选定的 div 更改颜色。import React, { useState } from "react";import "./styles.css";export default function App() {&nbsp; const [selectedId, setSelectedId] = useState(null);&nbsp; const array = [{ key: 1 }, { key: 2 }, { key: 3 }, { key: 4 }];&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {array.map((item) => {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Component&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={item.key}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id={item.key}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectedPanel={selectedId === item.key || selectedId === null}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() => setSelectedId(item.key)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; </div>&nbsp; );}function Component({ id, onClick, selectedPanel }) {&nbsp; return (&nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; className="panel"&nbsp; &nbsp; &nbsp; style={{ backgroundColor: selectedPanel ? "blue" : "red" }}&nbsp; &nbsp; &nbsp; onClick={onClick}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; Content - {id}&nbsp; &nbsp; </div>&nbsp; );}工作代码 -&nbsp;https://codesandbox.io/s/zealous-clarke-r3fmf?file=/src/App.js:0-770希望这是您正在寻找的用例。如果您遇到任何问题，请告诉我。

Answer 3

你可以添加状态&nbsp; const [selectedId, setSelectedId] = useState(null);然后制作一个函数来呈现在这种情况下的指南const renderGuide = ({ item, index }) => {&nbsp; &nbsp; console.log(item)&nbsp; &nbsp; const backgroundColor = item.id === selectedId ? "#FFFFFF" : "#FFFFFF";&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <Guide&nbsp; &nbsp; &nbsp; &nbsp; item={item}&nbsp; &nbsp; &nbsp; &nbsp; index={index}&nbsp; &nbsp; &nbsp; &nbsp; onPress={() => setSelectedId(item.id)}&nbsp; &nbsp; &nbsp; &nbsp; style={{ backgroundColor }}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; );&nbsp; };这样你就可以访问由 id 选择的项目