React还能这么玩（一）组件无render，只为传递数据

最新推荐文章于 2023-07-19 18:38:36 发布

小笼包是馒头

最新推荐文章于 2023-07-19 18:38:36 发布

阅读量1k

点赞数

分类专栏： React 文章标签： React JavaScript Component

本文链接：https://blog.csdn.net/xiaolongbaobushibao/article/details/99334001

版权

React 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

React还能这么玩（一）组件无render，只为传递数据

前言

在翻开源的React组件源码时经常看到一些用法很奇妙的，想着摘录下来，跟大家讨论下。

一、例子

参考rc-select,此处简化代码描述过程。

Select

class Select extends React.Component{
  // 内部的select、option都是原生的React基础组件，先用基础的来替代
  // rc-select 使用的是menu，比这个demo复杂多了
  render(){
    return (
        <select >
          {React.Children.map(this.props.children,child =>{
            const { key ,value ,children} = child.props
            return  <option key={key} value={value}>{children}</option>
          })}
        </select>
    )
  }
}

Option

Select.Option = class Option extends React.Component{}

使用

const App = props =>{
  return (
  return (
      <div>
        <Select>
          <Select.MyOption key="ZHANG" value="ZHANG">张全蛋</Select.MyOption>
          <Select.MyOption key="TANG" value="TANG">唐马儒</Select.MyOption>
        </Select>
      </div>
  );
  )
}

二、分析

这代码就不分析了，应该算比较简单的。不一样的是思路

三、为什么要这样用

刚学React的时候肯定会写成这样

const App = props =>{
  return (
  return (
      <div>
        <Select option={[
            <Select.MyOption key="ZHANG" value="ZHANG">张全蛋</Select.MyOption>,
            <Select.MyOption key="TANG" value="TANG">唐马儒</Select.MyOption>
            ]}/>
      </div>
  );
  )
}

而我猜rc-select这样写是应该为了适配原先select-option的写法

<html>
    <body>
        <selct>
            <option value="xxxx">XXXX</option>
        </select>
    </body>
</html>

有细心（手贱）的朋友肯定发现了，rc-select的Select.Option使用了原生的option代码居然还能跑！

import RcSelect from "rc-select";
import "rc-select/assets/index.css"
const { Option } = RcSelect
const App = props =>{
// 注意option的大小写
  return (
      <RcSelect>
        <Option value="ZHANG">张全蛋</Option>
        <option value="TANG">唐马儒</option>
      </RcSelect>
  )
}

但是会warning：

Warning: the children of `Select` should be `Select.Option` or `Select.OptGroup`, instead of `option`.

然而程序员是不care warning的。

小笼包是馒头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React还能这么玩（一）组件无render，只为传递数据

React还能这么玩（一）组件无render，只为传递数据前言在翻开源的React组件源码时经常看到一些用法很奇妙的，想着摘录下来，跟大家讨论下。一、例子参考rc-select,此处简化代码描述过程。Selectclass Select extends React.Component{ // 内部的select、option都是原生的React基础组件，先用基础的来替代 /...
复制链接

扫一扫