Question

我试图让另一个孩子哄骗孩子的方法。通过使用他们的父组件。

我知道在使用redux时我需要更改商店中的字段并且组件正在通过所需的道具重新渲染。但在这种情况下，我不需要保存任何东西，只是为了每次按下运行第一个子方法。

import React from 'react';
import Child1Container from "./Child1Container";
import Child2Container from "./Child1Container";

export default class Parentextends React.Component {
  constructor(props){
    super(props);

  }

  RunChild1Method(){
    // Run Child1 Method 
  }

  render() {
    return (
            <div>
              <Child1Container />
              <Child2Container RunChild1Method={this.RunChild1Method} />
            <div> 
            )
  }
}

Chiled2容器

import { connect } from 'react-redux';
import Child2Component from "./Child2Component";

const mapStateToProps = (state, ownProps) => {

    return {
          RunChild1Method: ownProps.RunChild1Method
    };
};

const Child2Container = connect(mapStateToProps)(Child2Component);

export default Child2Container ;

Child2组件

import React from 'react';

export default class Child2Component extends React.Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <button onclick={() => {this.props.RunChild1Method()}}> Click Me!</ button>

    )
  }
}

Answer 1

实现此用途参考：https://reactjs.org/docs/refs-and-the-dom.html

export default class Parent extends React.Component {
  RunChild1Method(){
    if (!this.child1Ref) return;
    this.child1Ref.runMethod();
  }

  render() {
    return (
      <div>
        <Child1Container ref={(comp) => { this.child1Ref = comp; }} />
        <Child2Container RunChild1Method={this.RunChild1Method} />
      <div> 
    )
  }
}

然而（我的意见）我强烈建议不构建这样的应用程序。组件应该是功能的封装，这是一种反模式，将导致未来的麻烦。

react-redux child1触发child2容器方法

1 个答案: