Question

我在组件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;

当我尝试设置State并将其作为道具传递时，我未定义。

我是初学者，所以请原谅我并帮助我。

Answer 1

最简单的方法是在state react-router链接

的

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

中传递您的数据

this.props.location.state.item

在/reports/details组件中

和控制台icon ...您将获得数据

Answer 2

您可以像这样传递item：

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

然后在您的子组件中，您可以使用：

this.props.location.query

Answer 3

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

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

商店包含应用程序状态和逻辑。他们的作用有点类似于传统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

Answer 4

我打算给你一个建议，就是如何做出反应（在你的情况下）。所以这就是：

ParentComponent（包含您的州：item？）

组件A - 从道具中获取点击处理程序，以修改ParentComponent状态中的item
组件B - 从ParentComponent的状态获取item的值为props

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

希望这有帮助！

Answer 5

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

参考此reactjs.org

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

5 个答案: