react 自定义组件引入及父子组件相互传值

自定义组件及引入

在项目里，自定义组件有利于项目的扩展和维护，相对于Vue的组件来说React的组件多少不是那么的友好。
废话不多说，开整！

---

首先，先在React项目目录里的src目录建立一个components目录（就相对于vue来说，React在建立的时候不自动建立compoents目录就很让人难以理解） 如图：

这个文件用于存放你的自定义组件。
随后建立你的第一个自定义组件

随后在你的工作台里输入 ‘rce’ 指令然后回车快速建立一个组件模板(至少vscode里是有这个功能的)，当然，你要是不想输入，也可以复制下面的代码CtrlCV进去，同时在下方的div中输入一段你喜欢的文字和一些配置，用于后面的传值

// 子组件
import React, { Component } from 'react'

export class com extends Component {
    render() {
        return (
            <div>
                <p>第一个自定义组件</p>
            </div>
        )
    }
}

export default com

子组件搞定后，去到你的App.js文件或者你的父组件中，做出如下的更改

// 父组件
import React, { Component } from "react";
// 导入子组件 注意 导入组件名不可与系统变量名冲突，否则会导致导入不成功
import Com from "./components/com"
class App extends Component {
  render() {
    return (
      <div className="App">
        {/*使用组件*/}
      	<Com />
      </div>
    );
  }
}
export default App;

组件应用搞定，接下来运行一下试试效果吧；

---

组件传值

搞定了自定义组件，那肯定也少不了后续的组件传参

父传子 ：
老实说，这个就非常简单了

// 子组件com
import React, { Component } from "react";

export class com extends Component {
  render() {
    return (
      <div>
        <p>第一个自定义组件</p>
        {/*新写一个标签，然后在标签中应用父组件方法props
         然后在.content 这个content就是用来在父组件中接受值的名称，
         叫啥都行，随你喜欢*/}
        <p>{this.props.content}</p>
      </div>
    );
  }
}

export default com;

进入父组件

// 父组件
import React, { Component } from "react";
// 导入子组件 注意 导入组件名不可与系统变量名冲突，否则会导致导入不成功
import Com from "./components/com"
class App extends Component {
  render() {
    return (
      <div className="App">
        {/*还记的刚刚的com组件的content么 写进去*/}
      	<Com content="我来自父组件，要去com子组件" />
      </div>
    );
  }
}
export default App;

好了，父传子传参是不是很简单，运行一下看看有什么变化吧

---

子传父

相对于父传子来说，子传父就稍微的麻烦一点
同样，先进子组件com

// 子组件
import React, { Component } from "react";

export class com extends Component {
  // 先在构造器里建立一个数据
  constructor(props) {
    super(props);
    this.state = {
      // 等会要传到父组件里的数据
      list: '子传父传参'
    };
  }
  // 将this挂到onRef中
  componentDidMount() {
    this.props.onRef&& this.props.onRef(this);
  }
  // 再来一个方法 等会在父组件调用
  popupClick(){
     alert('我是一个弹窗~')
  }
  render() {
    return (
      <div>
        <p>第一个自定义组件</p>
        <p>{this.props.content}</p>
      </div>
    );
  }
}

export default com;

// 父组件
import React, { Component } from "react";
// 导入子组件 注意 导入组件名不可与系统变量名冲突，否则会导致导入不成功
import Com from "./components/com"
class App extends Component {
  // 在父组件写入这么个玩意
  onRef = (ref) => {
    this.com = ref;
    // 然后用控制台输出一下ref 查看一下这是个什么玩意
    console.log(ref);
  };
  render() {
    return (
      <div className="App">
        {/*还记的刚刚的com组件的content么 写进去*/}
        {/*在这里 写入 onRef={this.onRef}用于接受子组件传过来的东西*/}
      	<Com content="我来自父组件，要去com子组件" onRef={this.onRef}/>
      </div>
    );
  }
}
export default App;

接下来去控制台看看输出

可以发现 ref 是这么一大坨东西

标注我已经放在图里了，接下来请开始你的表演吧！
熬不住了，告辞~