草庐IT

React中实现插槽效果的方案

学全栈的灌汤包 2023-04-04 原文

文章目录

React实现插槽

在开发中，我们抽取了一个组件，但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素。

我们应该让使用者可以决定某一块区域到底存放什么内容

这种需求在Vue当中有一个固定的做法是通过slot来完成的，React呢？

在React中是没有插槽的概念的, 或者说在React中是不需要插槽的, 因为React对于这种需要插槽的情况非常灵活，有两种方案可以实现：

组件的children子元素；

props属性传递React元素；

children实现插槽

每个组件都可以获取到 props.children：它包含组件的开始标签和结束标签之间的内容。

例如我们实现一个navbar, 要求左边, 中间, 右边的内容是不固定的, 由使用者来决定到底放什么

  • 在父组件的子组件标签中写入要插入到子组件的元素
import React, { Component } from 'react'
import NavBar from './c-cpns/NavBar'

export class App extends Component {
  render() {
    return (
      <div>
        {/* 父组件将要插入到子组件的元素写到组件标签中 */}
        <NavBar>
          <button>按钮</button>
          <h2>标题</h2>
          <i>斜体</i>
        </NavBar>
      </div>
    )
  }
}

export default App
  • 在子组件中通过this.props可以获取到一个children属性, 该属性中包含子组件标签开始到结束之间的内容
import React, { Component } from 'react'
import './style.css'

export class NavBar extends Component {
  render() {
    // 在子组件通过props中的children, 获取到要插入的元素
    const { children } = this.props
    return (
      <div className='nav-bar'>
        <div className='left'>
          {children[0]}
        </div>
        <div className='center'>
          {children[1]}
        </div>
        <div className='right'>
          {children[2]}
        </div>
      </div>
    )
  }
}

export default NavBar

注意: 如果children中有多个元素, 那么children是一个数组, 数组中存放着所有内容; 如果只插入一个元素到子组件中, 那么children本身就是插入的该元素, 如下:

父组件中只插入了一个元素

return (
  <div>
    {/* 父组件将要插入到子组件的元素写到组件标签中 */}
    <NavBar>
      <button>按钮</button>
    </NavBar>
  </div>
)

子组件直接使用children即可

render() {
  // 在子组件通过props中的children, 获取到要插入的元素
  const { children } = this.props
  return (
    <div className='nav-bar'>
      <div className='left'>
        {children}
      </div>
    </div>
  )
}

props实现插槽

通过children实现的方案虽然可行，但是有一个弊端：通过索引值获取传入的元素很容易出错，不能精准的获取传入的原生；

而且对顺序有严格的要求

另外一个种方案就是使用 props 实现(这个方案也是开发中使用的比较多的方案, 个人更推荐)：

我们之间通过具体的属性名，可以让我们在传入和获取时更加的精准；

首先在父组件通过props的方式将要插入的元素传入到子组件中

import React, { Component } from 'react'
import NavBarTwo from './c-cpns/NavBarTwo'

export class App extends Component {

  render() {
    // 定义要传入到子组件的元素
    const leftSlot = <button>按钮</button>
    const centerSlot = <h2>标题</h2>
    const rightSlot = <i>斜体</i>

    return (
      <div>
        {/* 将插入的元素通过props的方式传入到子组件 */}
        <NavBarTwo
          leftSlot={leftSlot}
          centerSlot={centerSlot}
          rightSlot={rightSlot}
        />
      </div>
    )
  }
}

export default App

再在子组件中获取到传递的数据进行展示

import React, { Component } from 'react'

export class NavBarTow extends Component {
  render() {
    // 在子组件中获取到父组件传递过来的数据
    const { leftSlot, centerSlot, rightSlot } = this.props

    return (
      <div className='nav-bar'>
        {/* 将传递过来的数据进行展示 */}
        <div className='left'>
          {leftSlot}
        </div>
        <div className='center'>
          {centerSlot}
        </div>
        <div className='right'>
          {rightSlot}
        </div>
      </div>
    )
  }
}

export default NavBarTow
React中实spanclasstokenreact.js$javascript$前端

有关React中实现插槽效果的方案的更多相关文章

  1. ruby - 在 Ruby 中实现 `call_user_func_array` - 2

    我怎样才能完成http://php.net/manual/en/function.call-user-func-array.php在ruby中？所以我可以这样做:classAppdeffoo(a,b)putsa+benddefbarargs=[1,2]App.send(:foo,args)#doesn'tworkApp.send(:foo,args[0],args[1])#doeswork,butdoesnotscaleendend 最佳答案 尝试分解数组App.send(:foo,*args)

  2. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

  3. ruby-on-rails - 如何在 Ruby on Rails 中实现无向图？ - 2

    我需要在RubyonRails中实现无向图G=(V,E)并考虑构建一个Vertex和一个Edge模型，其中Vertex有_多条边。由于边恰好连接两个顶点，您将如何在Rails中执行此操作？您是否知道任何有助于实现此类图表的gem或库(对重新发明轮子不感兴趣;-))？ 最佳答案 不知道有任何现有库在ActiveRecord之上提供图形逻辑。您可能必须实现自己的Vertex、EdgeActiveRecord支持的模型(请参阅Rails安装的rails/activerecord中的vertex.rb和edge.rb/test/fixtur

  4. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf)，开发人员无需担心javascript或jquery的东西。据我所知，JSF是一个规范，基于规范的各种可用实现，prim

  5. Ruby 守护进程和 JRuby - 备选方案 - 2

    我有一个应用程序正在从Ruby迁移到JRuby(由于需要通过Java提供更好的Web服务安全支持)。我使用的gem之一是daemons创建后台作业。问题在于它使用fork+exec来创建后台进程，但这对JRuby来说是禁忌。那么-是否有用于创建后台作业的替代gem/wrapper？我目前的想法是只从shell脚本调用rake并让rake任务永远运行......提前致谢，克里斯。更新我们目前正在使用几个与Java线程相关的包装器，即https://github.com/jmettraux/rufus-scheduler和https://github.com/philostler/acts

  6. ruby - 在 Ruby 中实现 to_int 和 to_str 的后果 - 2

    我haveaclass它公开了一个字符串值和一个int值(分别是命令输出和退出代码)。除了通过to_s和to_i公开它们之外，我还使用to_str和to_int，如下所示:classStatusdefto_s@outputendalias:to_str:to_sdefto_i@status.exitstatusendalias:to_int:to_iend我的想法是能够在尽可能多的情况下使用这个对象。将其强制转换为字符串或整数会增加可用性。例如，我可以将对象与字符串连接起来:a_string="Outputwas:"+results(我想用这个作为int强制转换的例子，但是Fixnum

  7. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几

  8. ruby - 在 Ruby 中实现二叉树 - 2

    我一直在尝试在Ruby中实现BinaryTree类，但我得到了stackleveltoodeep错误，尽管我似乎没有在该特定代码段中使用任何递归:1.classBinaryTree2.includeEnumerable3.4.attr_accessor:value5.6.definitialize(value=nil)7.@value=value8.@left=BinaryTree.new#stackleveltoodeephere9.@right=BinaryTree.new#andhere10.end11.12.defempty?13.(self.value==nil)?true:

  9. ruby - 如何在 Ruby 中实现私有(private)内部类 - 2

    来自Java，我正在尝试在Ruby中实现LinkedList。我在Java中实现它的通常方法是有一个名为LinkedList的类和一个名为Node的私有(private)内部类，其中LinkedList的每个对象都作为Node对象。classLinkedListprivateclassNodeattr_accessor:val,:nextendend我不想将Node类暴露给外部世界。然而，通过Ruby中的这个设置，我可以使用这个访问LinkedList类之外的私有(private)Node类对象-node=LinkedList::Node.new我知道，在Ruby1.9中，我们可以使用

  10. ruby - 在 Ruby 中实现 Luhn 算法 - 2

    我一直在尝试用Ruby实现Luhn算法。我一直在执行以下步骤:该公式根据其包含的校验位验证数字，该校验位通常附加到部分帐号以生成完整帐号。此帐号必须通过以下测试:从最右边的校验位开始向左移动，每第二个数字的值加倍。将乘积的数字(例如，10=1+0=1、14=1+4=5)与原始数字的未加倍数字相加。如果总模10等于0(如果总和以零结尾)，则根据Luhn公式该数字有效；否则无效。http://en.wikipedia.org/wiki/Luhn_algorithm这是我想出的:defvalidCreditCard(cardNumber)sum=0nums=cardNumber.to_s.s

随机推荐