开发文档
React
组件

组件

注意，组件的命名为大驼峰

基本使用 


function Button(){
  return <button>点击这里</button>
}

// 成对和自闭合都可以
function App() {
  return (
    <div>
      <Button/>
    </div>
  );
}

export default App;

父组件向子组件传递数据 

// 传递传递参数的形式是一个Object对象
function Button(props){

  return <button onClick={() => console.log(props.val)}>点击这里</button>
}

function App() {
  return (
    <div>
      {/* 注意传递字符串变量的时候大括号{}可以省略，但是其它类型的变量必须添加 */}
      <Button val={ "hello world!" } />
    </div>
  );
}

export default App;

如果有多个参数可以这样：

// 传递传递参数的形式是一个Object对象
function Button({ prop1, prop2 }){

  return <button onClick={() => console.log(props1 + props2)}>点击这里</button>
}

function App() {
  return (
    <div>
      <Button prop1={ "hello world!" } prop2={ false } />
    </div>
  );
}

export default App;

注意，如果使用子标签，那么会自动传递children的prop（不常用）

function Button(props){
  /* 
    props的值为:
    {
      children: <span/>
    }
    注意，children的值为节点
  */
  return <button onClick={() => console.log(props)}>点击这里</button>
}

function App() {
  return (
    <div>
      <Button>
        <span>Hello world!</span>
      </Button>
    </div>
  );
}

export default App;

子组件向父组件传递数据 

function Button({ onGetMsg }){
  const msg="Hello world!";
  return (
    <button onClick={() => onGetMsg(msg)}>按钮</button>
  )
}

function App() {

  const getMsg=(msg)=>{
    console.log(msg);
  }

  return (
    <div>
      <Button onGetMsg={ getMsg } />
    </div>
  );
}

export default App;

全局变量跨层传递 

import { createContext, useContext } from "react";

const LocalVal=createContext();

function A(){
  const val=useContext(LocalVal);
  
  return (
    <div>
      This is A, {val}
    </div>
  )
}

function App() {

  return (
    <div>
      <LocalVal.Provider value={"Hello world!"}>
        <A/>
      </LocalVal.Provider>
    </div>
  );
}

export default App;

备注：你也可以通过传递useState的数组来实现在任意组件中修改变量：

import { createContext, useContext, useState } from "react";

const LocalVal=createContext();

function A(){
  const val=useContext(LocalVal);

  const change=()=>{
    val.setVal("Hello React!");
  }
  
  return (
    <div>
      This is A, {val.val}
      <button onClick={change}>Inner Change!</button>
    </div>
  )
}

function App() {

  const [val, setVal] = useState("Hello world!");

  const change=()=>{
    setVal("Hello world!");
  }

  return (
    <div>
      <LocalVal.Provider value={{val, setVal}}>
        <A/>
        <button onClick={change}>Outer Change!</button>
      </LocalVal.Provider>
    </div>
  );
}

export default App;

注意，如果两个组件不在一个文件中，你需要手动导出createContext()

// App.js
import { createContext } from "react";
import ComponentA from "components/ComponentA"

export const LocalVal=createContext();

function App() {

  return (
    <div>
      <LocalVal.Provider value={"Hello world!"}>
        <A/>
      </LocalVal.Provider>
    </div>
  );
}

export default App;
// components/ComponentA.js
import { useContext } from "react";
import { LocalVal } from "../App";
function A(){
  const val=useContext(LocalVal);
  
  return (
    <div>
      This is A, {val}
    </div>
  )
}

注意，value={{val, setVal}}相当于

value={
  {
    "val": val,
    "setVal": setVal,
  }
}
事件绑定useState