React父子组件间如何传递字符串参数与状态？

一、将Component_2的div_name传递给Component_1的changeState方法 #

你现在的代码已经能触发父组件的状态修改，但缺少传递div_name的逻辑，我们可以通过调整子组件的点击事件调用方式，把参数直接传给父组件的回调函数：

1. 修改Component_1的changeState方法，接收参数并更新状态

我们可以新增一个状态来存储当前点击的div名称，同时在changeState里接收传递过来的divName：

class Component_1 extends React.Component{
  constructor(){
    super();
    this.state = { 
      initialState: false,
      activeDiv: "" // 新增状态，记录点击的div名称
    };
    // 推荐在constructor中绑定this，避免每次render重新生成函数引用
    this.changeState = this.changeState.bind(this);
  }

  changeState(divName){
    this.setState({ 
      initialState: !this.state.initialState,
      activeDiv: divName
    });
    // 这里可以处理接收到的divName，比如打印或者做其他逻辑
    console.log(`点击了${divName}，状态切换为${!this.state.initialState}`);
  }

  render(){
    return( <Component_2 blockName={this.changeState} /> )
  }
}

2. 调整Component_2的点击事件，传递div_name参数

在子组件的onClick中，用箭头函数包裹父组件传来的回调，直接把对应的div_name值传进去：

class Component_2 extends React.Component{
  render(){
    return(
      <ul>
        <li className="lists">
          <div className="blocks" onClick={() => this.props.blockName("about")}>
            {/* 你的其他元素 */}
          </div>
        </li>
        <li className="lists">
          <div className="blocks" onClick={() => this.props.blockName("contact")}>
            {/* 你的其他元素 */}
          </div>
        </li>
      </ul>
    )
  }
}

如果div_name是动态生成的（比如来自子组件的props数组），可以用循环渲染的方式传递参数：

class Component_2 extends React.Component{
  render(){
    // 假设父组件传递了divNames数组作为props
    const divNames = this.props.divNames || ["about", "contact"];
    return(
      <ul>
        {divNames.map(name => (
          <li key={name} className="lists">
            <div className="blocks" onClick={() => this.props.blockName(name)}>
              {name}
            </div>
          </li>
        ))}
      </ul>
    )
  }
}

二、父组件能否访问子组件的props？ #

分两种情况来看：

• 如果props是父组件传递给子组件的：父组件本身就持有这个值，完全不需要去子组件中访问。比如你把divName="about"传给子组件，父组件自己就知道这个值，直接用父组件的变量/状态即可。
• 如果props是子组件自身定义的（比如defaultProps）：可以通过ref来访问，但这种做法不推荐，因为React的核心设计是单向数据流，尽量通过props传递数据、通过回调传递事件，而不是直接访问子组件的内部属性。

如果一定要通过ref访问（仅作演示）：

class Component_1 extends React.Component{
  constructor(){
    super();
    this.component2Ref = React.createRef();
  }

  componentDidMount(){
    // 访问子组件的props
    console.log("子组件的props：", this.component2Ref.current.props);
  }

  render(){
    return( <Component_2 ref={this.component2Ref} blockName={this.changeState} /> )
  }
}

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