Question

我想从父组件中调用子函数OpenTest()并显示一个变量“ greeting”。

所以我尝试使用

之类的道具

<Child greeting={greeting}/>

并显示它。当我要将道具从父母发送给孩子时，它可以工作

我想从Parent.js致电OpenTest()
我也想在“父母”中显示“问候”

//Parent.js
import React from 'react'
import Child from "./Child";

export default function Parent(props) {
    return (
        <div>
            {props.greeting}
            <Child >
                <button onClick={props.Opentest}>Open Test</button>
            </Child>
        </div>
    );
}

//Child.js
import React from "react";

export default function Child(props) {
  const greeting = "Hello";

  function openTest() {
    console.log("Done");
  }

  return  ;
}

Answer 1

我不完全了解您要做什么，但是您需要了解的一件事是道具只能从父母到孩子。如果要从子项更新父项，则应考虑使用具有state属性的类组件，该组件可以通过回调进行更新。另一种方法是使用useState hook。

以下是您可能如何完成此操作的示例：

//Parent.js
import React, { Component } from "react";
import Child from "./Child";

export default class Parent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      greeting: ""
    };

    this.updateGreeting = this.updateGreeting.bind(this);
  }

  updateGreeting(greeting) {
    this.setState({ greeting });
  }

  render() {
    return (
      <div>
        {this.state.greeting}
        <Child updateGreeting={this.updateGreeting} />
      </div>
    );
  }
}

//Child.js
import React from "react";

export default function Child(props) {
  const greeting = "Hello";

  return (
    <div>
      <button onClick={() => props.updateGreeting(greeting)}>
        click to update greeting to hello
      </button>
    </div>
  );
}

如何在不使用ref方法的情况下从父项/传递道具到父项组件调用子函数？

1 个答案: