如何在 React 中将函数从父级传递给子级答案

【问题标题】：How to pass an Function from Parent to Child in React如何在 React 中将函数从父级传递给子级
【发布时间】：2020-07-21 17:53:34
【问题描述】：

我正在开发一个 React 项目，因为我有 App.js，这是父组件。我有

另一个组件是 Child.js 这个组件是 Child for App.js。

我 Child.js 我有一个按钮，我写了一个函数，当有人点击时

按钮的背景颜色会改变。我已经在 Child.js 组件中编写并应用了

到那个按钮。现在我必须更改 Child.js 按钮文本颜色，为此我已经写了一个

App.js 中的函数，我正在尝试将该函数传递给 Child.js。但我无法得到

输出所以请帮我输出。

这是 App.js

import React, { useState } from 'react';
import './App.css';
import Child from './Child/Child';

function App() {
  const [textColor, setTextColor] = useState('');

  const changeTextColor = () => {
    setTextColor('yellow')
  }

  return (
    <div className="App">
      <Child Fun={changeTextColor}></Child>
    </div>
  );
}

export default App;

这是 Child.js

import React, { useState } from 'react';
import './Child.css';

const Child = (props) => {
    console.warn(props)
    const [bg, setBg] = useState('')
    const color = () => {
        setBg('red')
    }
    return(
        <div>
            <button className='btn btn-primary'
            style={{background: bg}}
             onClick={() => {color(); props.Fun()}}>Child Button</button>
       </div>
  )
}

export default Child

【问题讨论】：

基本上在点击孩子的按钮时，你需要调用父母函数吗？
您正在更改文本颜色，但您没有使用它。

标签： reactjs

【解决方案1】：

您没有在任何地方使用textColor 状态。我猜你想这样使用它：

const [textColor, setTextColor] = useState('white');

<Child textColor={textColor} Fun={changeTextColor}></Child>

在子组件中：

    <div>
        <button className='btn btn-primary'
        style={{background: bg, color: props.textColor }}
         onClick={() => {color(); props.Fun()}}>Child Button</button>
   </div>

【讨论】：

【解决方案2】：

您正在传递并正确使用您的功能。如果您将textColor 记录到App.js 中，您会看到颜色确实更新了。

问题是，您目前没有在任何地方使用您的 textColor 变量，因此您看不到变化。也将textColor 传递给您的孩子，并在某处使用它以直观地看到变化。

（注意：在这种情况下，我会将您的 textColor 状态保留在您的子组件中，而不是 App）

【讨论】：

【解决方案3】：

你必须向子组件传递一个关于颜色变化的道具。我看到在你的情况下，没有任何道具被发送给孩子。

https://codesandbox.io/s/access-child-component-method-react-hook-olmco?file=/src/Child.js:0-445

import React, { useState } from "react";
import Child from "./Child";

function Parent() {
  const [textColor, setTextColor] = useState("");

  function changeTextColor() {
    setTextColor("blue");
  }

  return (
    <div className="App">
      <Child Fun={changeTextColor} textColor={textColor} />
    </div>
  );
}

export default Parent;

import React, { useState } from "react";

const Child = props => {
  const [bg, setBg] = useState("");
  const color = () => {
    setBg("red");
  };
  return (
    <div>
      <button
        className="btn btn-primary"
        style={{ color: props.textColor, background: bg,  }}
        onClick={() => {
          color();
          props.Fun();
        }}
      >
        Child Button
      </button>
    </div>
  );
};

export default Child;

【讨论】：