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

【问题标题】：How to switch between sibiling in react如何在反应中在兄弟姐妹之间切换
【发布时间】：2021-03-07 11:08:10
【问题描述】：

假设我有一个这样的 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 必须将其颜色更改为红色。不是一次，而是每次当我点击这四个中的任何一个时。

【问题讨论】：

标签： javascript reactjs onclick state rerender

【解决方案1】：

添加一个状态来存储被点击的（或者说，当前选中的）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;

【讨论】：

【解决方案2】：

你可以添加状态

  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 选择的项目

【讨论】：

【解决方案3】：

试试这个方法，

跟踪状态中选定的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

希望这是您正在寻找的用例。如果您遇到任何问题，请告诉我。

【讨论】：