React 非 class 父子组件 传值

1.使用 props 传递值

父组件通过 props 将值传递给子组件，子组件通过接收 props 来获取传递的值。

父组件：

import React, { useState } from 'react';
import Child from './Child';

function Parent() {
  const [name, setName] = useState('Tom');
  return (
    <div>
      <Child name={name} />
      <button onClick={() => setName('Jerry')}>Change Name</button>
    </div>
  );
}

export default Parent;

子组件：

import React from 'react';

function Child(props) {
  return (
    <div>
      <p>My name is {props.name}</p>
    </div>
  );
}

export default Child;

2.使用 Context API 传递值

Context API 允许跨层级传递值，避免了 props 层层传递的麻烦。

创建一个 context：

import React from 'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

父组件：

import React, { useState } from 'react';
import ThemeContext from './ThemeContext';
import Child from './Child';

function Parent() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={theme}>
      <Child />
      <button onClick={() => setTheme('dark')}>Change Theme</button>
    </ThemeContext.Provider>
  );
}

export default Parent;

子组件：

import React from 'react';
import ThemeContext from './ThemeContext';

function Child() {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <div>
          <p>My theme is {theme}</p>
        </div>
      )}
    </ThemeContext.Consumer>
  );
}

export default Child;

3.使用 useState 和 useEffect 钩子传递值

useState 和 useEffect 钩子可以在函数组件中存储和更新状态，并在组件渲染后执行副作用。

父组件：

import React, { useState, useEffect } from 'react';
import Child from './Child';

function Parent() {
  const [name, setName] = useState('Tom');
  useEffect(() => {
    setTimeout(() => {
      setName('Jerry');
    }, 3000);
  }, []);
  return (
    <div>
      <Child name={name} />
    </div>
  );
}

export default Parent;

子组件：

import React from 'react';

function Child(props) {
  return (
    <div>
      <p>My name is {props.name}</p>
    </div>
  );
}

export default Child;