React - 函数作为子组件

太过爱你忘了你带给我的痛 2022-04-15 04:10 235阅读 0赞

函数作为子组件也是React的一种设计模式，和高级组件一样，仅仅是一种设计模式。

这种模式如何工作的了？

举个栗子

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1][]

这是三个按钮，我可以选择其中的一个，然后下方可以显示你的颜色。

这个如何用函数作为子组件解决了？

const options = [
          { name: 'Red', val: 'red' },
          { name: 'Orange', val: 'orange' },
          { name: 'Blue', val: 'blue' }
    ];
    class Selector extends React.Component {//按钮组件
          constructor (props) {
            super(props);
            this.state = {
                val: 'red',
            }
          }
          handle = (data) => {
            this.setState({
              val: data.val,
            })
          }
          render () {
            return (
                <div className = 'wrap'>
                     <ul>
                         { this.props.options.map( data => (
                          <li key = { data.val }
                                className = { `item ${ this.state.val == data.val ? 'selected' : '' }` }
                                onClick = { () => this.handle(data) }  >
                                { data.name }
                            </li>
                         ))}
                     </ul>
                     { /* 这是关键 ，下面的代码调用子组件（函数），渲染出那一种颜色 */ }
                     { this.state.val && this.props.children(this.state.val)}
                </div>
            );
          }
    }
    class App extends React.Component {
      constructor (props) {
            super(props);
      }
      render () {
        return (
          <Selector options = { options } //子组件 （为一个函数)，接受一个参数，然后渲染出来
      >{ color => (
           <div style = {
       {
             width: "50px",
             height: "50px",
             background: color,
             
           } }/>  
      )}</Selector>
        )
      }
    }
    ReactDOM.render(
      <App />
      ,
      document.getElementById("root")
    )

.wrap {
      width:200px;
      border:1px solid #eee;
    }
    ul {
      list-style: none;
      padding:0px;
    }
    .item {
      text-align:center;
      color:white;
      background:gray;
      cursor:pointer;
    
    }
    .selected {
      color: black;
      background: white;
    }

它仅仅是一个设计模式，是否选择使用，完全在于你。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181121130950894.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70 1]: /images/20220415/62690578249348f8b3b9e49de4cc3688.png

发表评论取消回复

表情：

评论列表（有 0 条评论，235人围观）

还没有评论，来说两句吧...

相关阅读

相关 React父组件调用子组件中的函数

第一步在父组件中写下面代码 onRef = (ref) => { this.child = ref }; 第二步将此方法传个子...

ゞ浴缸里的玫瑰/ 2024年04月18日 06:36/ 0 赞/ 73 阅读

相关 react通过ref获取函数子组件实例方法

在react16之后带来了hooks之后，确实方便了很多组件开发，也加快了函数式编程的速度，但是当你通过useRef获取子组件的时候，又恰好子组件是一个函数组件，那么将会报一个

╰半夏微凉°/ 2023年10月15日 08:01/ 0 赞/ 140 阅读

相关 React 函数组件坑

记录一下用React函数组件编写时遇到的坑在函数组件中通常会引入useState 和 useEffect import React , { useState,

以你之姓@/ 2022年12月28日 12:47/ 0 赞/ 176 阅读

相关 React中父组件执行子组件的函数使用class + onRef写法

React中父组件执行子组件的函数使用class + onRef写法在React中,父组件执行子组件的函数的写法如下父组件中添加函数 onRe

缺乏、安全感/ 2022年12月19日 14:29/ 0 赞/ 44 阅读

相关 react父组件与子组件进行通信

在使用react组件时，父子组件之间经常需要进行通信，那么是如何具体实现的呢？如下：父组件： class Parent extends Component {

秒速五厘米/ 2022年06月05日 09:10/ 0 赞/ 319 阅读

相关 React-router（6）父组件传【值】 or 【函数】给子组件

6、父组件传【值】 or 【函数】给子组件 [DEMO地址][DEMO] > 参考 5.fromParentComponent.js 如果你已经熟悉了前面的内容，

小灰灰/ 2022年05月30日 04:09/ 0 赞/ 241 阅读

相关 react子组件与父组件通信

用 function prop 与父组件通信 props > props 本身是不可变的。当我们试图改变 props 的原始值时，React 会报出类型错误的警告，组件

短命女/ 2022年05月14日 10:29/ 0 赞/ 265 阅读

相关 React - 函数作为子组件

函数作为子组件也是React的一种设计模式，和高级组件一样，仅仅是一种设计模式。这种模式如何工作的了？举个栗子 ![watermark_type_ZmFuZ3poZW

太过爱你忘了你带给我的痛/ 2022年04月15日 04:10/ 0 赞/ 236 阅读

相关 react 父组件给子组件传值

首先是父组件： import React, {Component} from 'react'; import AddModalComponent from '

迷南。/ 2021年11月15日 11:38/ 0 赞/ 397 阅读

相关 react 子组件传递数据给父组件

第一种: 通过定义函数实现 1、父组件设置含有this.setState({...})的方法,形参为接收子组件的变量 2、将方法作为参数传

清疚/ 2021年07月24日 15:08/ 0 赞/ 582 阅读