ReactJS教程：如何在App.js中主动向组件传递状态值

嘿，看起来你已经在做状态传递的基础操作啦！咱们一步步理清楚怎么在你的App.js里主动把状态值传给其他组件：

1. 直接通过Props传递（你已经在实践了） #

看你的代码，已经把App组件的this.state.tables作为props传递给<Header>组件了：

<Header tables={this.state.tables}/>

在Header组件里，你可以这样获取这个状态值：

• 如果是类组件：通过this.props.tables访问

  class Header extends Component {
    render() {
      return (
        <div className="header">
          {this.props.tables.map(table => (
            <span key={table.id} className="table-item">{table.name}</span>
          ))}
        </div>
      );
    }
  }
  

• 如果是函数组件：通过参数props访问

  const Header = (props) => {
    return (
      <div className="header">
        {props.tables.map(table => (
          <span key={table.id} className="table-item">{table.name}</span>
        ))}
      </div>
    );
  };
  

2. 跨层级传递状态（避免Props Drilling） #

如果你的组件层级很深（比如App → Parent → Child → GrandChild），一层层手动传props会很繁琐，这时候可以用React Context来跨层级传递状态：

第一步：在App组件中创建并提供Context #

import React, { Component, createContext } from 'react';
import axios from 'axios';
import config from './config'; // 假设你的config文件路径

// 创建表格状态的Context
const TableContext = createContext();

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      url: config.Url,
      tables : [],
    };
  }

  componentWillMount() {
    axios.get(this.state.url + '/tables')
      .then(response => {
        if (response.data.status === '200') {
          this.setState({ tables: response.data });
        }
      })
      .catch((error) => {
        console.log('error ' + error);
      });
  }

  render() {
    return (
      <Router>
        {/* 用Provider包裹所有需要接收状态的组件 */}
        <TableContext.Provider value={this.state.tables}>
          <div className="App">
            <Header />
            {/* 其他嵌套组件，比如Parent/Child等 */}
          </div>
        </TableContext.Provider>
      </Router>
    );
  }
}

第二步：在任意层级的组件中使用Context #

• 类组件用法：

  class GrandChild extends Component {
    // 绑定Context
    static contextType = TableContext;
    
    render() {
      return (
        <div>
          {this.context.map(table => (
            <div key={table.id}>{table.name}</div>
          ))}
        </div>
      );
    }
  }
  

• 函数组件用法：

  import { useContext } from 'react';
  
  const GrandChild = () => {
    const tables = useContext(TableContext);
    return (
      <div>
        {tables.map(table => (
          <div key={table.id}>{table.name}</div>
        ))}
      </div>
    );
  };
  

3. 主动更新状态后同步传递 #

如果你在App组件里有更新tables状态的操作（比如新增、删除表格），只要调用this.setState更新状态，所有接收该props/context的组件都会自动重新渲染，拿到最新的状态值。比如你可以在App里添加一个更新方法：

// 在App组件中添加方法
addNewTable = (newTable) => {
  const updatedTables = [...this.state.tables, newTable];
  this.setState({ tables: updatedTables });
}

// 把方法也传给子组件，让子组件可以触发状态更新
render() {
  return (
    <Router>
      <div className="App">
        <Header tables={this.state.tables} addNewTable={this.addNewTable}/>
      </div>
    </Router>
  );
}

然后在Header组件里调用这个方法，就能同步更新App的状态：

// 在Header组件中触发状态更新
handleAddTable = () => {
  const newTable = { id: Date.now(), name: '新表格' };
  this.props.addNewTable(newTable);
}

内容的提问来源于stack exchange，提问作者Hareesh S