时间戳

首页 > 解决方案 > 有没有办法将布尔值列表传递给 React 中的父元素？

javascript - 有没有办法将布尔值列表传递给 React 中的父元素？

问题描述

我不确定我是否可以做这样的事情......

首先，我有一个呈现两个表的组件

import React, { Component } from 'react';
import TableList from './TableOne';

class ComponentWhichRendersTwoTables extends Component {
    render() {
        return (
            <>
                <TableList
                    rows={ rows }
                />
                <TableList
                    rows={ rows }
                />
            </>
        );
    }
}

const rows = [
    { id: 1, fieldOne: 'fieldOne', fieldTwo: 'fieldTwo' },
    { id: 2, fieldOne: 'fieldOne', fieldTwo: 'fieldTwo' },
    { id: 3, fieldOne: 'fieldOne', fieldTwo: 'fieldTwo' },
    { id: 4, fieldOne: 'fieldOne', fieldTwo: 'fieldTwo' },
    { id: 5, fieldOne: 'fieldOne', fieldTwo: 'fieldTwo' },
    { id: 6, fieldOne: 'fieldOne', fieldTwo: 'fieldTwo' },
    { id: 7, fieldOne: 'fieldOne', fieldTwo: 'fieldTwo' },
    { id: 8, fieldOne: 'fieldOne', fieldTwo: 'fieldTwo' },
    { id: 9, fieldOne: 'fieldOne', fieldTwo: 'fieldTwo' },
];

export default ComponentWhichRendersTwoTables;

然后，在表中我有一个 TableRow 渲染行次

import React from 'react';
import TableRow from './TableRow';

function TableList({ rows }) {
    return (
        <table>
            <thead>
                <th/>
                <th>Title One</th>
                <th>Title Two</th>
            </thead>
            <tbody>
                { rows.map(row => (
                    <TableRow
                      row={ row }
                    />
                )) }
            </tbody>
        </table>
    );
}

export default TableList;

然后是 TableRow 组件

import React, { useState } from 'react';

function TableRow({ row }) {
    const [icon, useIcon] = useState(false);

    clickHandler = () => {
        useIcon(!icon)
    }

    const { fieldOne, fieldTwo } = row;
    const isActive = icon ? '-active' : ''
    return (
        <tr>
            <td onClick={clickHandler} className={`fancyIcon${isActive} `}>
                ICON
            </td>
            <td>{fieldOne}</td>
            <td>{fieldTwo}</td>
        </tr>
    );
}

export default TableRow;

这里的事情是我想结束下一个输出功能：

在呈现两个表的组件中，第一个是我从 API 获得的字段列表，另一个是当用户单击第一个的元素时将填充的列表。

所以让我们假设在原来的行中我有四个行元素并且用户点击了前两个。在这种情况下，第二个表应该显示用户单击的这两个元素。

我想知道是否有办法在没有参考的情况下做到这一点。

谢谢！

标签： javascripthtmlreactjs

解决方案

我对您想要从孩子传递给父母的价值观感到困惑，但答案并没有真正改变。为了实现这一点，您需要将更新函数传递给孩子并在那里调用它。像这样的东西可以工作：

const parent = () => {
 const [values, setValues] = useState({...objWithSomeValues})

 return (
   <Child setValues={setValues} values={values}/>
  )

};

const Child = (props) => {
  const {setValues} = props;
  return (
    <button onClick={()=> {setValues({...values, update: updateValue })}}>Click Me!</button>
  )
};

这是一个过于简单的版本，没有考虑重新渲染和其他可能使您的特定设置复杂化的事情。更新函数也不必是 setState 钩子。它可以是您自己的自定义函数。

推荐阅读