Question

im在此处尝试触发子组件的方法。我具有以下组件：

子组件

class WorkflowIllustration extends Component {

  _unselectEdge(previous_transition) {
      /// some code///
  }

    render() {
        return (
          <Fragment>
            ///some code//
        </Fragment>
        )
    }
}
//some redux code here//


export default withResizeDetector(connect(null, mapDispatchToProps)(WorkflowIllustration));

父级组件

class WorkflowObjectComponent extends Component {
  constructor(props) {
    super(props);
    this.WorkflowIllustration = React.createRef();
  }

  state = { visible: false };

  componentDidMount() {
    this.props.initial(this.props.workflow_class.id,this.props.match.params.id)
  }
  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  
  onClose = () => {
    this.setState({
      visible: false,
    })
    console.log(this.refs)
    this.WorkflowIllustration.current._unselectEdge(this.props.workflowobject.selected_transition)
    console.log(this.WorkflowIllustration)
  };


  render() {
    return (
        <Fragment>
            <Col className="gutter-row" span={12}>
              <WorkflowIllustration
                can_edit={false}
                workflow={this.props.workflowobject}
                showDrawer={this.showDrawer}
                ref={this.WorkflowIllustration}
              />
            </Col>
          <Drawer
            title="Change Password"
            placement="right"
            closable={true}
            onClose={this.onClose}
            visible={this.state.visible}
            width={600}
          >
              <WorkflowEditor
                can_edit={false}
                workflow={this.props.workflowobject}
              />
          </Drawer>
        </Fragment>
        :
        <div style={{ textAlign: 'center' }}><Spin size='large' /></div>
    )
  }
} 


export default withRouter(connect(mapStateToProps, mapDispatchToProps)(WorkflowObjectComponent));

但是在我的控制台中，我得到了这个信息：

{current: null}

后面是一个错误，他们无法读取undefined的值。我希望尽可能采用这种代码模式，因为我不想接触子组件。

是否有原因和解决方案？

Answer 1

您不能在组件上创建引用。因此，您不能从父组件执行子组件方法。但是您可以在子组件中执行父方法，因此需要重写逻辑。

无法触发父组件中的子组件方法

1 个答案: