如何给相似的Parents发送独一无二的道具？

Question

我目前制作了一个类似于旋转木马的自定义组件，名为 Scrollbar。当我 select 一个特定的项目时，它会动态加载信息并显示内容 div，其中包含有关该项目的信息，例如 ID、名称、缩略图等。

我要解决的问题是我想显示多个 滚动条 并且一次只有一个内容 div 处于活动状态。问题是每个滚动条都有自己的内容 div。我需要一种方式来传达哪个是活动的。

我在想我可能需要另一个组件让我们称之为 Home 显示多个 Scrollbars 和 onClick，它设置当前的活跃的，其余的不活跃。所有 Scrollbars 应该仍然显示，但是，一个动态内容 div 将出现在活动 Scrollbar.

下方

听起来我需要发送一个 Scrollbar 的 道具 isActive = true 和其他 isActive = false。我不确定如何实现。

以下是我的组件的简短版本：

Scrollbar.js

const Scrollbar = ({category, isActive }) => {


return (  
     <div className="scrollbar">
                <h2>{category}</h2>
                <div className="item-wrapper" style={{maxWidth: `${scrollbarWidth}px`}}>
                   .
                   .
                   .
                   .
                    //Handles Navigating the Scrollbar Left and Right
                    <SlideButton  type="prev" onClick={handlePrev}/>
                    <SlideButton  type="next" onClick={handleNext}/>
                </div>
                //Dynamic Content gets shown here when user clicks on an item & Scrollbar (tbd)
                {isActive && currentCard && <Content activeCard={currentCard} clickFunc={handleCardChange}  /> }
                
     </div>
    );
}
 
export default Scrollbar;

Home.js

const Home = () => {

       
        return ( 
            
            <div className="home">
                <Scrollbar key="0" category="Scroll 1" activeBar={null} />,
                <Scrollbar key="1" category="Scroll 2" activeBar={null} />
            </div>
        );
    
}
 
export default Home;

Answer 1

Home 组件应该保存谁是 activeBar 和 useState 的 ID。它应该将 setActiveBar 传递给每个 Scrollbar.

const Home = () => {
  const [activeBar, setActiveBar] = useState(0)
       
  return ( 
    <div className="home">
        <Scrollbar 
          key="0"
          id="0"
          category="Scroll 1" 
          activeBar={activeBar} 
          setActiveBar={setActiveBar}
          />,
        <Scrollbar 
          key="1"
          id="1"
          category="Scroll 2" 
          activeBar={activeBar} 
          setActiveBar={setActiveBar}
          />
    </div>
  );   
}

Scrollbar 组件应检查它的 id 是否与 activeBar 相同，并相应地设置 isActive。它也应该在点击时将自己设置为 activeBar。

const Scrollbar = ({category, id, activeBar, onClick }) => {
  const isActive = activeBar === id;

  return (  
    <div 
      onClick={() => setActiveBar(id)}
      className="scrollbar"
      >

如何给相似的Parents发送独一无二的道具？

How to send unique props to similar Parents?

reactjs

react-props

react-hooks

use-state