react18版本学习Day2

silence0054

已于 2024-04-02 21:43:57 修改

阅读量249

点赞数 2

文章标签： react.js 学习前端

于 2024-03-30 19:21:20 首次发布

本文链接：https://blog.csdn.net/silence0054/article/details/137180039

版权

本文介绍了如何在React中创建和管理组件，包括父组件引用子组件、传递参数、以及子组件通过props修改父组件状态和直接调用父组件方法的实例。

摘要由CSDN通过智能技术生成

组件的引用:

父组件注册并引用:

import Parent from "./components/parent";
 <Parent  />

父组件传递参数

<Parent text="firstParent" />

子组件接受参数并使用

function Son(props) {
  return (
      <div> <h1>{props.text}</h1>
  )
}
export default Son

组件方法的调用及变量的使用

import { useState } from "react"
function Son(props) {
  const [count, setCount] = useState(0)
 function addData() {
    setCount(count + 1)
  }
  function datajianyi() {
    setCount(count - 1)
  }
    return (<div> <h1>{props.text}</h1>
    <div className="parentBox" onClick={addData}>count+1==={count}</div>
    <div className="parentBox" onClick={datajianyi}>count-1</div>
    </div>
    )
}
export default Son

react子组件修改父组件值

父组件


import Parent from "./components/parent";
import Son from "./components/son";
import { useState } from "react";
function App() {
  let [str, setStr] = useState("")
     //写方法给子组件调用
  function handleStr(val) {
    setStr(val)
  }
  return (
    <div className="App">
      str=====  {str}
      <Parent text="firstParent" onDataChange={handleStr} />
      <Son text="firstSon" />
      <Parent text="secondParent" />
      <Son text="secondSon" />
    </div>
  );
}

export default App;

子组件通过handleData传递实参给父组件

import { useState } from "react"
function Parent(props) {
  function handleData() {
    props.onDataChange&& props.onDataChange("asdasd")
  }
  return (
    <div> <h1>{props.text}</h1>
    <div className="parentBox" onClick={handleData}>handleData</div>
    </div>
    )
}
export default Parent

子组件直接调用父组件方法:

父组件

import Son from "./components/son";
function App() {
 function sonFn(val){
    console.log("父组件方法被调用",val);
  }
  return (
 <Son text="firstSon"  sonFnData={sonFn}/> //通过sonFnData方法传递
 );
}

export default App;

子组件代码

function Son(props) {
  function handleSon(){
    props.sonFnData(123)
  }
  return (
    <div> <h1>son</h1>
        //子组件以重写方法的形式去调用父组件方法,并传递参数
      <div className="parentBox" onClick={handleSon}>son</div></div>

  )
}
export default Son

PS:新手刚入react 若有不正确的地方或者其他更好的方案欢迎评论区指正不喜勿喷