单击时样式反应组件答案

【问题标题】：style react component on click单击时样式反应组件
【发布时间】：2020-06-02 06:53:46
【问题描述】：

所以我有这个简单的名称 div：

我只想按下其中一个并获得绿色背景色，当按下另一个时，第一个将被取消，因此一次只会有一个着色。我只需要内联样式，否则我不知道自己被卡住了。

first.js：

从“反应”导入反应；

function SidebarComponents({name,title,selected,onSelect}) {

    const style={
        cursor: "pointer"
    };

    const classes = {
        selected: {
          backgroundColor: '#00ff00'
        }
      }

    return (
        <div 
            name={name}
            title = {title}
            style={style}
        >
           {name}
        </div>
    )

}
export default SidebarComponents;

second.js：

import React, { useEffect, useState } from "react";
import SidebarComponents from "../SidebarComponents/SidebarComponents";
import 'bootstrap/dist/css/bootstrap.min.css';
import '../Sidebar1/Sidebar.css';

function Sidebar({ onChange }) {
  const [selectedComponent, setSelectedComponent] = useState({
    componentsName: [
      { name: "John Smith", title: "John Smith" },
      { name: "Male, 26 years old", title: "Gender and age" },
      { name: "john", title: "Alerts" },
      { name: "claude", title: "Recent" },
      { name: "edward", title: "Blood pressure" },
      { name: "mira", title: "Body weight" },
      { name: "alex", title: "Glucose" },
      { name: "zac", title: "SPO2" }
    ]
  });

  return (
    <div>
      {selectedComponent.componentsName.map(component => {
        return (
            <div className="row align-items-start sidebar-components">
                <div className="col">
                    <SidebarComponents 
                    name={component.name} 
                    title={component.title} 
                    />
                </div>
          </div>
        );
      })}
    </div>
  );
}

export default Sidebar;

【问题讨论】：

使用该 div 名称创建一个类名组合，例如 className={selectedDiv == 'div1'?'active' : ' '}。并为该活动类提供背景颜色

标签： reactjs components styling

【解决方案1】：

在侧边栏上：

const [selectedName, setSelectedName] = useState(null);
//...
<SidebarComponents 
  name={component.name} 
  title={component.title}
  selected={component.name === selectedName}
  onSelect={setSelectedName}
/>

在侧边栏组件上：

const selectedClassName = selected ? 'selected' : '';

//...

<div 
  name={name}
  title={title}
  style={style}
  className={`sidebar ${selectedClassName}`} //you must add sidebar and selected classes to your styles
  onClick={() => onSelect(name)}
>
  {name}
</div>

【讨论】：

【解决方案2】：

在地图内部的 div 中添加 key 属性。
处理 onClick 事件，将所选元素的索引/值存储在您的状态中。
使用类名的条件渲染应用样式。

second.js

<div>
  {selectedComponent.componentsName.map((component, index) => {
    return (
      <div key={index} onClick={() => handelOnClick(index)} className="row align-items-start sidebar-components">
        <div className="col">
          <SidebarComponents 
            name={component.name} 
            title={component.title} 
            className={selectedIndex === index ? 'highlight' : ''}
          />
        </div>
      </div>
    );
  })}
</div>

当您在 first.js 中呈现文本时，无需使用 div 包装器，使用 'p'、'span' 标记
在 second.js 中，不要迭代整个 div 块，而是使用 ul li

【讨论】：