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的。