如何在 React 中使用 filter() 控制 JSX 组件？

Question

我目前正在使用 returns JSX 的子组件。

//PARENT COMPONENT

import ApprovalTableElement from './E_Approval_Element.js';


    //JSX of E_Approval_Element.js
    const [approvalElement, setApprovalElement] = useState([ApprovalTableElement]);

    //Add one more approval column
    const addApprovalSpace = () => {
        setApprovalElement([...approvalElement, ApprovalTableElement]);
    };

    return (
        <div className={styles['EApprovalWriteDiv']}>
            <div className={styles['authDiv']}>
                {approvalElement.map((element, index) => (
                     <button>DELETE ONE APPROVAL SECTION</button>
                    <ApprovalTableElement index={index} />
                ))}
            </div>
        </div>
    );
};

export default E_Approval_Write;

//CHILD COMPONENT

function ApprovalTableElement() {

    return (
        <>
            <table className={styles['approvalTable']}>
                <tbody className={styles['approval']}>
                    <tr className={styles['name']}>
                        <th>
                            <select style={{ marginLeft: 10 }}>
                                <option>선택</option>
                                <option>결재자</option>
                                <option>합의자</option>
                            </select>
                        </th>
                    </tr>
                    <tr className={styles['signature']}>
                        <td>
                            <div>SIGN</div>
                        </td>
                    </tr>
                    <tr className={styles['name']} onClick={memberModalTrigger}>
                        <td>
                            <Typography variant='button' display='block'>
                            </Typography>
                        </td>
                    </tr>
                </tbody>
            </table>
        </>
    );
}

export default ApprovalTableElement;

使用这段代码，我想做的是使用

{approvalElement.map((element, index) => (
   <button>DELETE ONE APPROVAL SECTION</button>
   <ApprovalTableElement index={index} />
))}

这个按钮，删除选中的ApprovalTableElement。

现在，我有这个UI。当我点击 + 按钮时，我不断添加组件。但是当我点击删除按钮时，按钮上的 table 应该会消失。但不是其他的。

我只知道组件的索引，所以我真的很困惑如何使用 filter() 删除目标组件。

或者，我应该在子组件而不是父组件中添加按钮标签吗？

但是，如果我可以用这段代码实现我想要做的事情，请告诉我如何正确设置代码以使事情成为可能。谢谢！

Answer 1

只选择那些id与你要删除的不同的id

const removeApprovalSpace = (id) => {
  setApprovalElement(items => items.filter(item => item.id !== id));
};
//usage
<button onClick={() => removeApprovalSpace(id)}>Remove</button>

如果你没有 id，你可以使用索引

const removeApprovalSpace = (index) => {
  setApprovalElement(items => items.filter((item, i) => i !== index));
};
//usage
<button onClick={() => removeApprovalSpace(index)}>Remove</button>

如何在 React 中使用 filter() 控制 JSX 组件？

How to control JSX component using filter() in React?

javascript

components

filter

reactjs