时间戳

首页 > 解决方案 > React 组件更深层次的结构和 props

reactjs - React 组件更深层次的结构和 props

问题描述

这里初学者...

我正在尝试重构我的（否则工作的应用程序），所以我不需要一遍又一遍地重复相同的代码......这是情况（我只是粘贴代码的关键部分）

第一个组件通过 fetch 从 API 映射项目：

<Slider>

// Slider 1
{pool .map(item => 
    <div className="entry">
      <Pills type={item.type.abb} description={item.type.description} />
      /* ETC */
    </div>
)}

// Slider 2
{pool .map(item => 
    <div className="entry">
      <Pills type={item.type.abb} description={item.type.description} />
      /* ETC */
    </div>
)}

// Slider 3
{pool .map(item => 
    <div className="entry">
      <Pills type={item.type.abb} description={item.type.description} />
      /* ETC */
    </div>
)}

// ETC

在第二个中，我有布局和道具：

const Pills = props => {
return (

  <div className="panel-header-icons">
    <div className="pills">
      <span
        className={"label-blue " + props.type_abb + '-bg'},
        title={props.type_description}
      >
        {props.type_abb}
      </span>
    </div>
  </div>

)

}

我想做的是只有一个滑块元素并显示来自另一个组件的项目值。

{pool .map(item => 
   <SliderOne />
</div>
)}
//ETC

我知道有基础知识，但我只是被困在这里。如果您至少能指出我在这里缺少 React 功能的哪一部分，我会非常高兴。谢谢...

标签： reactjs

解决方案

只需创建一个新组件。

export default ({children, item})=>{
  return(
  <div>
      <Pills type={item.type.abb} description={item.type.description} />
      {children}
  </div>  
)
}

然后你像这样使用它：

<Slider item={item}>etc</Slider>

推荐阅读