时间戳

首页 > 解决方案 > 获取反应函数组件的子属性

reactjs - 获取反应函数组件的子属性

问题描述

我在这里创建了一个简单的示例： https ://codesandbox.io/s/crimson-monad-r6tns?fontsize=14&hidenavigation=1&theme=dark

当您单击文本 1 时，它会增加子组件中的值。在父组件中，我有一个按钮，我想从父组件访问子组件中的值。不是事件，而是 ChildComponent.YourCurrentValue 之类的东西。在 REACT 中可能吗？您可以在 render 方法中为子组件添加一个 id，然后通过它访问它的属性吗？

标签： reactjs

解决方案

您必须通过在 child 中调用 prop 函数来将更改传递给 parent，如下所示：

import React, { useState } from "react";

const ChildComponent = props => {
  const [selectedValue, setSelectedValue] = useState(1);

  function clicked() {
    const newCounter = counter + 1;
    setSelectedValue(newCounter);

    props.onChange(newCounter)
  }

  return <div onClick={clicked}>{selectedValue}</div>;
};

export default ChildComponent;

并将其取回父组件，如下所示：

import React from "react";
import "./styles.css";
import ChildComponent from "./ChildComponent";

export default function App() {
  function showChildProperty(newCounterValue) {
    alert(newCounterValue);
  }

  return (
    <div className="App">
      <button onClick={showChildProperty}>Show child property</button>
      <ChildComponent onChange={showChildProperty} />
    </div>
  );
}

希望你找到你想要的答案。

推荐阅读