在 2 个 React 组件之间传递单个值的最简单方法是啥？

Posted 2023-02-21

【中文标题】在 2 个 React 组件之间传递单个值的最简单方法是啥？

【英文标题】：Whats the easiest way to pass a single value between 2 React components?在 2 个 React 组件之间传递单个值的最简单方法是什么？

【发布时间】：2018-09-12 17:16:18

【问题描述】：

我在组件 A 中获得了正确的数据，现在我需要将该值传递给组件 B。在第一个组件中是一个单击事件，它接收单击的项目，现在我需要将该单击的值传递给组件 B为了进一步格式化。

    class ReportsData extends Component 
    constructor(props) 
    super(props) 
        this.state = 
            value: null
    
    render() 

    const reports, employees = this.props;
    let sortedReports = _.sortBy(reports, function(o)  return new moment(o.date); ).reverse();

    const handleClick = (item) => 
        return item // --> 2011 --> I NEED TO TAKE THIS VALUE AND PASS IT TO ReporstDetails COMPONENT // When I do setState = (value: item) error ???
    

    const listReports = sortedReports.map(item => 

        return (
        <tr key=item.rowNumber>
            <td>  item.year</td>

            <td> item.month</td>

            <td> item.bruto_ukupno</td>
            <td> item.neto_plata</td>
            <td> item.topli_obrok</td>

            <td> item.doprinosi</td>
            <td> parseInt(item.ukupno_plata)</td>

            <td className="table-actions">
                <Link onClick=this.handleClick.bind(this, item.year)
                    to=`/reports/details`>
                    <PieChart size="21"/>
                </Link>

            </td>
        </tr>
    ));

    return (
        <div className="container">
        <div>
            <header>
            <h4>A complete list of reports</h4>
            <p>Details available by clicking on an item </p>
            </header>
            <hr />
        </div>

        <table className="table table-striped">
        <thead>
        <tr>
            <th>Year</th>
            <th>Month</th>

            <th>Bruto</th>
            <th>Neto</th>
            <th>Meal</th>

            <th>Taxes</th>
            <th>Employees</th>
            <th>Details</th>
            <th></th>
       </tr>
        </thead>
         <tbody>
            listReports
        </tbody>
    </table>
   </div>
    );



export default ReportsData;

当我尝试 setState 并将其作为 props 传递时，我变得未定义。

我是初学者，请见谅并帮助我。

【问题讨论】：

将被点击项的ID存储在你的组件状态中，然后在render中，通过props将相关项向下传递给子组件。如果您不知道该怎么做，我真的建议您阅读React tutorial，因为它涵盖了所有这些主题，对新手来说非常平易近人！跨度>

【参考方案1】：

最简单的方法是在state 的react-router 链接中传递您的数据

<Link to= pathname: '/reports/details', state:  item  >
    <PieChart size="21"/>
</Link>

和/reports/details 组件中的控制台this.props.location.state.item...你会得到你的数据

【讨论】：

我越来越不确定：/你能给我更多解释吗？或者问题出在地图功能上。

请显示handleClick函数的代码以及你在哪里得到undefined

我将立即编辑此代码。提前谢谢你

请先告诉我你建议我的方式。我试过了，还是不行。我知道我搞砸了，但我需要弄清楚。

在/reports/details 组件中控制台你的this.props.location 并告诉那里发生了什么

【参考方案2】：

您面临的问题是导致创建 Redux、MobX 和其他各种类似flux 的框架的原因。

在没有“父”-“子”关系的组件之间传递 prop 的解决方案是使用 Store。

Stores 包含应用程序状态和逻辑。他们的作用有点 类似于传统 MVC 中的模型，但它们管理 许多对象——它们不代表像 ORM 这样的单一数据记录 模型做。它们也不与 Backbone 的系列相同。多于 只需管理 ORM 样式对象的集合，存储管理 应用程序中特定域的应用程序状态。

您的应用程序中可以有多个商店，您可以在其中对数据进行分组并在组件上导入/使用适当的商店。

请注意，即使没有任何这些库，您仍然可以使用 Store 概念，例如：

class UIStore 
    isModalActive = true;


const store = new UIStore();
export default store;

然后只需将您的商店导入您的任何 React 组件中

import UIStore from 'stores';

然后像这样访问属性：

UIStore.isModalActive

或者设置它的值：

UIStore.isModalActive = false;

我的建议是使用其中一个库，因为即使对于小型项目，您也迟早会需要它。如果它们的值发生变化，它们可以通知包含它们的任何组件并相应地重新渲染它们。

Store example in Redux

Store example in MobX

【参考方案3】：

我将给你一个建议，这就是事情是如何完成的（在你的情况下）。所以这里是：

ParentComponent（包含您的状态：item?）

组件 A - 从修改父组件状态 item 的道具获取点击处理程序

Component B - 从 ParentComponent 的 state 中获取 item 的值作为 props

这样，当组件 A 中的点击处理程序被执行时，这将触发 ParentComponent 状态的更改，因此整个事情会再次重新渲染，并且您的组件 B 会收到相关的 item 值。

希望这会有所帮助！

【参考方案4】：

如果组件 A 有一些状态值，如果你需要传递给它的子组件 B，那么你需要将它作为 props 传递。

参考这个reactjs.org

【参考方案5】：

您可以像这样传递item：

<Link to="/reports/details", query: your state here>
    <PieChart size="21"/>
</Link>

然后在你的子组件中你可以使用这个：

this.props.location.query