單擊按鈕時在另一個組件中顯示一個組件

Question

單擊組件時，我想查看來自虛擬模塊的信息。 我嘗試了幾種方法，但我對反應還很陌生，所以我沒有取得任何成功。

我有一個組件將模塊中每個元素的一些信息投射為列表，我希望能夠單擊它，並在另一個組件中顯示該特定元素的擴展信息。

到目前為止，這就是我所擁有的：

數據列表.tsx

import React from 'react'
import '../css/ListOfData.css'
import ListOfDataElement from "./ListOfDataElement";
import DummyListContent from "./DummyListContent";
function ListOfData() {
    const dataComponent = DummyListContent.map(item => <ListOfDataElement key={item.id} product={item}/>)

    return (
        <div className="ListOfData_container">
            {dataComponent}
        </div>
    )
}

export default ListOfData

數據元素列表.tsx

import React from "react";
import '../css/ListOfData.css'
function ListOfDataElement(props: any) {
    return(
        <div className={'ListOfDataElement'} onClick={() => alert('test')}>
            <h3>{props.product.id} - {props.product.name}<i className={'arrow right'}/></h3>
        </div>
    )
}
export default ListOfDataElement

數據信息.tsx

import React from 'react'
import '../css/InfoOfData.css'

function InfoOfData() {

    return (
        <div className="InfoOfData_container" id="InfoContainer">

        </div>
        )

}

export default InfoOfData

InfoOfDataElement.tsx

import React from "react";

function InfoOfDataElement(props:any) {

    return(
        <div className={'ListOfDataElement'}>
            <h3>{props.product.name}</h3>
            <h4>Spent: {props.product.spent}</h4>
            <p>Description: {props.product.description}</p>
        </div>
    )

}
export default InfoOfDataElement

虛擬列表內容.tsx

const content = [
    {
        id: "#1",
        name: "Placeholder",
        spent: 1,
        description: "Placeholder Placeholder Placeholder Placeholder."
    },
    {
        id: "#2",
        name: "Placeholder",
        spent: 4,
        description: "Placeholder Placeholder Placeholder Placeholder."
    },
    {
        id: "#3",
        name: "Placeholder",
        spent: 1,
        description: "Placeholder Placeholder Placeholder Placeholder."
    },
    {
        id: "#4",
        name: "Placeholder",
        spent: 2,
        description: "Placeholder Placeholder Placeholder Placeholder."
    },
    {
        id: "#5",
        name: "Placeholder",
        spent: 1,
        description: "Placeholder Placeholder Placeholder Placeholder."
    },
    {
        id: "#6",
        name: "Placeholder",
        spent: 3,
        description: "Placeholder Placeholder Placeholder Placeholder."
    },
    {
        id: "#7",
        name: "Placeholder",
        spent: 5,
        description: "Placeholder Placeholder Placeholder Placeholder."
    },
    {
        id: "#8",
        name: "Placeholder",
        spent: 4,
        description: "Placeholder Placeholder Placeholder Placeholder."
    }
]

export default content

我的目標是讓 InfoOfDataElement 顯示被單擊的 ListOfDataElement 元素的信息的 rest，並在 InfoOfData 中呈現它。

Answer 1

我自己是新手，我不明白 100% 你想做什么，但我會盡力幫助你實現你想要做的事情，如果你想在反應中渲染一個組件，你有幾種方法，更改本地 state 是最簡單的方法之一，在下一個示例中（我不知道它是否有效。我可能會錯過一些東西）我使用 state 作為數據，它也會渲染組件，所以如果你傳遞 state該按鈕也將獲得新的 state 並觸發渲染。

import React from 'react'
import '../css/InfoOfData.css'

function InfoOfData() {
const [state,myState] = useState(//the data to transfer)

    return (
        <div className="InfoOfData_container" id="InfoContainer">
           <button onClick={()=><InfoOfDataElement props={state}/>}
        </div>
        )

}

export default InfoOfData

Answer 2

嘗試這個：

import React from 'react'
import '../css/ListOfData.css'
import ListOfDataElement from "./ListOfDataElement";
import DummyListContent from "./DummyListContent";

function ListOfData() {
    return (
      <div>

     {
       DummyListContent.map((item,key) => {
         return (
           <div className='container' key={item.id}>
             <ListOfDataElement id={item.id} product={item}/>
           </div>
         )
       }
    )
}

export default ListOfData;

import React from "react";
import '../css/ListOfData.css'
function ListOfDataElement({ product }) {
    return(
        <div className={'ListOfDataElement'} onClick={() => alert('test')}>
            <h3>{id} - {name}<i className={'arrow right'}/></h3>
        </div>
    )
}
export default ListOfDataElement

Answer 3

這是一個代碼沙箱，我假設您希望它正常工作。 沙盒

那么基本上你需要一個 state 來保存所選元素。

假設你點擊按鈕，然后你會觸發一個回調來改變父組件（App）的 state，因為我們將selected的 state 作為 props 傳遞給子組件（ListOfData，InfoOfData 等......）React 會自動拾取state 更改並重新呈現 InfoOfData 及其子 InfoOfDataElement 中的內容。

我只是省略了按鈕部分，但只要您有一個按鈕並將onClick事件更改為該按鈕，它就會起作用。

Answer 4

InfoOfData 組件具有 state 和選定的產品，並將 function onSelectItem傳遞給列表中的子項

import React from 'react'
import DummyListContent from "./DummyListContent";
import InfoOfDataElement from "./InfoOfDataElement";
import ListOfData from "./ListOfData";
import '../css/InfoOfData.css'

function InfoOfData() {

    const [selected, setSelected] = useState(null);

    const onSelectItem = (item) => {
        setSelected(item);
    }

    return (
        <div className="InfoOfData_container" id="InfoContainer">
            {selected && <InfoOfDataElement product={selected} />} // Render if product is on state
            <ListOfData onSelect={onSelectItem} /> // There we pass function as prop
            
        </div>
        )

}

export default InfoOfData

列出將 onSelect 作為道具傳遞給孩子

import React from 'react'
import '../css/ListOfData.css'
import ListOfDataElement from "./ListOfDataElement";

function ListOfData(props) {
    const { list = [], onSelect } = props; // pass list
    const dataComponent = list.map(item => <ListOfDataElement key={item.id} product={item} onSelect={onSelect} />)

    return (
        <div className="ListOfData_container">
            {dataComponent}
        </div>
    )
}

export default ListOfData

List item 調用 function onSelect with product to Parent

import React from "react";
import '../css/ListOfData.css'
function ListOfDataElement(props: any) {
    const { onSelect, product } = props;

    const onSelectProduct = () => onSelect(product); // Call prop function onSelect

    return(
        <div className={'ListOfDataElement'} onClick={onSelectProduct}>
            <h3>{props.product.id} - {props.product.name}<i className={'arrow right'}/></h3>
        </div>
    )
}
export default ListOfDataElement

請檢查所有進口和道具