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

这里有两个语法问题。

我建议您仔细阅读此处的反应基础知识，以确保您对基础知识具有扎实的基础。 https://reactjs.org/tutorial/tutorial.html

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

onIncrementCount={VALUE}中的值就是您要传递的东西。因此，这应该是增加计数的函数。我再次重命名了-一个好的模式是使用前缀的道具，以及让处理程序使用前缀的道具。

  <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>;
};

将功能作为道具传递给另一个组件

3 个答案: