React：从另一个组件调用函数（具体示例）

Posted 2023-02-23

【中文标题】React：从另一个组件调用函数（具体示例）

【英文标题】：React: Calling Function From Another Component (Specific Example)

【发布时间】：2021-10-03 09:23:01

【问题描述】：

我试图更好地理解 React，所以我制作了这个玩具示例来尝试让 React 组件从另一个组件调用函数。我正在查看 Chrome 上的 React Dev 工具，但没有任何内容记录到控制台。我不确定为什么会这样。有人可以向我解释为什么这是错误的以及如何解决它吗？

TestButton.js 文件

import React from 'react';
import Button from '@material-ui/core/Button';

export default function TestButton() 
  return(
    <div>
      <Button
    id='searchButton'
    variant="contained"
    color="primary"
    type="submit"
    fullWidth
    onClick=testFunction
  >
    Search
  </Button>
    </div>
  );

App.js 文件：

import './App.css';
import Header from './components/Header.js';
import TestButton from './components/TestButton.js';

function testFunction() 
  console.log("Yay it works!");


function App() 
  return (
    <div className="App">
      <Header />
      <TestButton></TestButton>
    </div>
  );


export default App;

【问题讨论】：

testFunction 既不会从App.js 导出，也不会从TestButton.js 导入。 TestButton.js 中根本不存在。

@tkausl ***.com/questions/68545994/… 那么你会不会碰巧知道这个问题的答案？

【参考方案1】：

您需要将testFunction 的引用从App 传递到TestButton。像这样的：

export default function TestButton(fn) 
  return(
    <div>
      <Button
        id='searchButton'
        variant="contained"
        color="primary"
        type="submit"
        fullWidth
        onClick=fn
      >
        Search
      </Button>
    </div>
  );


function App() 
  function testFunction() 
    console.log("Yay it works!");
  
  return (
    <div className="App">
      <Header />
      <TestButton fn=testFunction></TestButton>
    </div>
  );

按照您的方式，testFunction 不在 TestButton 组件的范围内，因此传入一个 TestButton 可以用作回调的函数是实现此目的的一种方法。

【讨论】：

我可以将 onClick=fn 作为道具从 TestButton 传递给 App 吗？ @Chris Farmer

***.com/questions/68545994/…那你会不会知道这个问题的答案？

【参考方案2】：

您的App 组件需要显式地将对该函数的引用传递给TestButton 组件：

<TestButton testFunction=testFunction></TestButton>

并且您的TestButton 组件需要接受传递给它的属性对象。从那里你可以解构函数并使用它。

export default function TestButton( testFunction ) 

【讨论】：

***.com/questions/68545994/…那你会不会碰巧知道这个问题的答案？