将函数作为道具传递给另一个组件

Question

我正在尝试将组件内的函数作为道具传递给另一个组件。

我有以下：

// Parent Component
import React, { useState } from 'react';
const IncrementingCount = () => (
   const [count, setCount] = useState(0)
   const increment = () => {
     return setCount(count +1)
   };
   <ul>
     <li>
       My count:{count} <IncreaseCount onclick={IncrementingCount} />
     </li>
   </ul>
)
    
//Child component
import React from 'react'
const IncreaseCount = (IncrementingCount) => {
  return (
    <button onClick={IncrementingCount}> Click Me </button> 
  );
};

我对 React 完全陌生。

Answer 1

这里有几个语法问题。

我建议你在这里复习一下 React 基础知识，以确保你的基础知识扎实。 https://reactjs.org/tutorial/tutorial.html

IncreaseCount 是您的子组件，因此您需要通过提供属性将某些内容传递给它的道具。这些可以命名为任何名称 - 但我会避开像 onclick 这样的默认值，因为它们用于 html 按钮。 （除非您的组件是一个按钮，或者具有类似按钮的行为）。在这里，我认为一个好的名称应该是 onIncrementCount 或类似的名称。

onIncrementCount={VALUE} 中的值就是你要传递的东西。所以这应该是增加计数的函数。我再次重命名了它 - 一个好的模式是道具使用 on-prefix，处理程序使用 handle-prefix。

  <IncreaseCount onIncrementCount={handleIncrementCount} />

const IncrementingCount = () => (
  const [count, setCount] = useState(0)

  // This is the handler function you'll pass to your child IncreaseCount component
  const handleIncrementCount = () => {
    return setCount(count +1)
  };

  <ul>
    <li>
      My count:{count} <IncreaseCount onIncrementCount={handleIncrementCount} />
    </li>
  </ul>
)

最后在您的子组件中 - 您可以通过函数的 props 参数访问。这是您在此处绑定的名称 - <IncreaseCount onIncrementCount={handleIncrementCount} /> - onIncrementCount 所以您需要 props.onIncrementCount。

//Child component
import React from 'react'

const IncreaseCount = (props) => {
  return (
    <button onClick={props.onIncrementCount}> Click Me </button> 
  );
}

Answer 2

您需要将increment 作为道具传递给您的孩子，然后您可以在孩子中使用props.onClick 访问该功能。

您传递给组件的每个道具都可以从props 对象访问。

import React from  'react'

const IncrementingCount = () => {
  const [count, setCount] = React.useState(0)

  const increment = () => {
    return setCount(count +1)
  };

  return <ul>
    <li>
      My count:{count} <IncreaseCount onClick={increment} />
    </li>
  </ul>
}


const IncreaseCount = (props) => {
  return <button onClick={props.onClick}> Click Me </button> 
}

更重要的是，首先学习 React 的基础知识。观看一些关于 React 的视频教程。然后自己构建一个项目。

Answer 3

看看这个。 https://codesandbox.io/s/stackoverflow64102251-j4eoi

我已经修复了你的代码。阅读 React 文档或观看 Youtube 教程。你还有很长的路要走。

import React, { useState } from "react";

const IncrementingCount = () => {
  const [count, setCount] = useState(0);
  const increment = () => {
    return setCount(count + 1);
  };

  return (
    <ul>
      <li>
        My count:{count}
        <IncreaseCount IncrementingCount={increment} />
      </li>
    </ul>
  );
};

//Child component
// import React from 'react'
const IncreaseCount = (props) => {
  const { IncrementingCount } = props;
  return <button onClick={IncrementingCount}> Click Me </button>;
};