如何在反应中的兄弟姐妹之间切换
How to switch between sibiling in react
假设我有一个这样的 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;
这将创建一个应用程序 div,其中将有四个子 div 元素。
我想要的是;每当我单击内部 div 之一时,其余三个 div 必须将其颜色更改为红色。不是一次,而是每次我点击这四个中的任何一个时。
您可以添加状态
const [selectedId, setSelectedId] = useState(null);
然后制作一个函数来呈现本例中的指南
const renderGuide = ({ item, index }) => {
console.log(item)
const backgroundColor = item.id === selectedId ? "#FFFFFF" : "#FFFFFF";
return (
<Guide
item={item}
index={index}
onPress={() => setSelectedId(item.id)}
style={{ backgroundColor }}
/>
);
};
这样您就可以访问由 id 选择的项目
添加一个状态来存储点击的(或者说,当前选择的)div
import React, { useState } from "react";
import Component from "./component";
function App() {
const [selectedDiv, setSelectedDiv] = useState(-1);
const array = [
{ key : 1 } , { key : 2 } , { key : 3 } , { key : 4 }
]
return (
<div>
{array.map( (item) => {
<Component key={item.key} clickHandler={() => {setSelectedDiv(item.key)}} isColoured={(selectedDiv === item.key || selectedDiv < 0) ? false : true} />
})}
</div>
);
}
export default App;
现在在 Component
中,检查 isColoured
道具,如果是 true
,请应用颜色,否则不要。
import React from "react";
function Component(props) {
return (
<div onClick={props.clickHandler} style={props.isColoured ? {height:"50px",width:"50px",backgroundColor:"red"} : null}>
Content
</div>
);
}
export default Component;
试试这个方法,
跟踪状态中选择的div(使用id)并根据状态中选择的div更改Component
颜色。
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [selectedId, setSelectedId] = useState(null);
const array = [{ key: 1 }, { key: 2 }, { key: 3 }, { key: 4 }];
return (
<div>
{array.map((item) => {
return (
<Component
key={item.key}
id={item.key}
selectedPanel={selectedId === item.key || selectedId === null}
onClick={() => setSelectedId(item.key)}
/>
);
})}
</div>
);
}
function Component({ id, onClick, selectedPanel }) {
return (
<div
className="panel"
style={{ backgroundColor: selectedPanel ? "blue" : "red" }}
onClick={onClick}
>
Content - {id}
</div>
);
}
工作代码 - https://codesandbox.io/s/zealous-clarke-r3fmf?file=/src/App.js:0-770
希望这是您正在寻找的用例。如果您遇到任何问题,请告诉我。
假设我有一个这样的 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;
这将创建一个应用程序 div,其中将有四个子 div 元素。
我想要的是;每当我单击内部 div 之一时,其余三个 div 必须将其颜色更改为红色。不是一次,而是每次我点击这四个中的任何一个时。
您可以添加状态
const [selectedId, setSelectedId] = useState(null);
然后制作一个函数来呈现本例中的指南
const renderGuide = ({ item, index }) => {
console.log(item)
const backgroundColor = item.id === selectedId ? "#FFFFFF" : "#FFFFFF";
return (
<Guide
item={item}
index={index}
onPress={() => setSelectedId(item.id)}
style={{ backgroundColor }}
/>
);
};
这样您就可以访问由 id 选择的项目
添加一个状态来存储点击的(或者说,当前选择的)div
import React, { useState } from "react";
import Component from "./component";
function App() {
const [selectedDiv, setSelectedDiv] = useState(-1);
const array = [
{ key : 1 } , { key : 2 } , { key : 3 } , { key : 4 }
]
return (
<div>
{array.map( (item) => {
<Component key={item.key} clickHandler={() => {setSelectedDiv(item.key)}} isColoured={(selectedDiv === item.key || selectedDiv < 0) ? false : true} />
})}
</div>
);
}
export default App;
现在在 Component
中,检查 isColoured
道具,如果是 true
,请应用颜色,否则不要。
import React from "react";
function Component(props) {
return (
<div onClick={props.clickHandler} style={props.isColoured ? {height:"50px",width:"50px",backgroundColor:"red"} : null}>
Content
</div>
);
}
export default Component;
试试这个方法,
跟踪状态中选择的div(使用id)并根据状态中选择的div更改Component
颜色。
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [selectedId, setSelectedId] = useState(null);
const array = [{ key: 1 }, { key: 2 }, { key: 3 }, { key: 4 }];
return (
<div>
{array.map((item) => {
return (
<Component
key={item.key}
id={item.key}
selectedPanel={selectedId === item.key || selectedId === null}
onClick={() => setSelectedId(item.key)}
/>
);
})}
</div>
);
}
function Component({ id, onClick, selectedPanel }) {
return (
<div
className="panel"
style={{ backgroundColor: selectedPanel ? "blue" : "red" }}
onClick={onClick}
>
Content - {id}
</div>
);
}
工作代码 - https://codesandbox.io/s/zealous-clarke-r3fmf?file=/src/App.js:0-770
希望这是您正在寻找的用例。如果您遇到任何问题,请告诉我。