在反应js中将数据传递给组件onClick答案

【问题标题】：passing data to componnet onClick in react js在反应js中将数据传递给组件onClick
【发布时间】：2021-06-11 08:33:45
【问题描述】：

我们有 2 个组件。一个是Test1，第二个是Test2。我的问题是我们如何将数据从组件 Test1 传递到 Test2（它们是分开的组件。） onClick 事件。：例如这样的函数：

  const ClickHandler =()=>{
        //pass data to Test2
      
  }

【问题讨论】：

数据通常通过 props 传递给子组件，但还有其他方法可以存储数据并传递数据。您没有提供足够的上下文来真正提供有用的答案。您能否更新您的问题以包含Minimal, Complete, and Reproducible Code Example？

标签： javascript reactjs state react-props

【解决方案1】：

我认为有两种方法可以做到这一点。

成为同一个父母的孩子并共享道具。

  import {useState} from "React"
   
  const TestOneComponent = ({value}) => (
    <span>{value.toString()}<span>
  )

  const TestTwoComponent = ({value, onClick}) => (
    <span>{value.toString()}</span>
    <button onClick={onClick}>Increase Value</button>
  )

  const ParentComponent = () => {
    const [value, setValue] = useState(0)

    const onClick = () => {
      setValue(value + 1)
    }

    return (
      <>
        <TestOneComponent value={value}>
        <TestTwoComponent value={value} onClick={onClick}>
      </>
    )
  }

管理 store 并将 props 传递给这两个组件。

【讨论】：

你能解释一下方法2吗？
在概念上与第一种方法相同。分享道具。但只需使用全局商店。

【解决方案2】：

您可以使用 props 将数据传递给其他组件并在触发 onClick 事件时呈现它，或者

您可以通过 onClick 事件导航到新页面并将数据传递到标题/路由并在新页面的组件中访问该数据

【讨论】：