React JS 将数据或子组件传递给父组件

Question

是否可以使用 props 将数据从子组件传递到父组件？

-Parent component
  --- ItemList component.
  --- DisplatSelect component from the itemList component

我在子组件中有一个来自父组件的项目列表，然后我想将所选数据的索引发送到位于父组件中的另一个子组件。

不能很好地举例，请参阅随附的屏幕截图以获取其他参考。 非常感谢！

在此处输入图像描述

Answer 1

您可以将数据保留在父组件中，并使用 function 将道具从子组件传递给父组件。 这个概念被称为提升 State Up在这里您定义 state 在最高的共同祖先，所以所有子组件都使用相同的数据，在这种情况下是选择项

function Parent() {
  const [selectedItem, setSelectedItem] = useState(null);
  const data = []; // Your Data
  return (
    <>
      <h1>Your selected Item = {selectedItem}</h1>
      {data.map((item) => {
        <Child item={item} setSelectedItem={setSelectedItem} />;
      })}
    </>
  );
}

function Child({ item, setSelectedItem }) {
  return <Button onClick={() => setSelectedItem(item.id)}> {item} </Button>;
}

Answer 2

我认为，最简单的方法是让子组件选择正确地接受 function ，例如onSelectionChanged 。 如果您为传递给孩子的每个项目都有一个按钮，您可以执行以下操作：

子组件 A

const ChildA = ({ items, onSelectionChanged }) => {
    return (
        <div>
            {items.map((item, index) => (
                <button onClick={() => onSelectionChanged(index)}>Item</button>
            ))}
        </div>
    )
}

子组件 B

const ChildB = ({ selectedItem }) => {
    return (
        <div>
            Selected {selectedItem}
        </div>
    )
}

父组件

const Parent = () => {
    const [selection, sets election] = useState({});

    const onSelectionChanged = index => {
        console.log(`ChildA selection changed: ${index}`);
    }

    return (
        <div>
            <ChildA items={items} onSelectionChanged={onSelectionChanged} />
            <ChildB selectedItem={selection} />
        </div>
    )
}

因此，当您的子组件处理选择的更改时，它会调用作为道具onSelectionChanged传递的 function 。 您可以将任何您想要的数据从 ChildA 传递到 function。

请注意，父组件将选定的值（来自 ChildA）保留在本地 state 中，然后通过道具将该值传递给 ChildB。

Answer 3

您可以在父组件中拥有一个 state 变量并将其传递给子组件以在它们之间共享数据。 我将发布一个示例代码块，说明如何为您的案例执行此操作。

export default function ParentComponent (props) {
  const data = ['image_1_url', 'image_2_url', ...] // Data for the images
  const [selectedIndex, setSelectedIndex] = useState(-1); // Selected index (-1 represents no selection)
  return (
    <ImageList data={data} selectImage={setSelectedIndex} />
    {(selectedIndex !== -1) ? (<SelectedImage data={data[selectedIndex]} />) : (<No ImageSelected/>)}
  );
}

然后图像列表组件可以使用 selectImage 属性到 select 图像

export default function ImageList (props) {
  return (
    <div>
      props.data.map((imageUrl, index) => (
        <div onClick={() => {props.setSelected(index)}}>
          <img src={imageUrl}/>
        </div>
      ))
    </div>
  );
}

Answer 4

是的，这是可能的。 我们有一个父 state 值，并将每个点击子组件更新到该组件。

import React, { useState } from "react";

const Child1 = (props) => {
  return (
    props.items.map( (item, index) => (
      <button key={index.toString()} onClick={() => { props.updateIndex(item.id) }}>
        {item.name}
      </button>
    ) )
  )
} 

const Child2 = (props) => {
  return (
    <h1>Item selected: {props.selectItem}</h1>
  )
} 

const ParentComponent = () => {
  const listItems = [
    {
      id:1,
      name: "sample name 1"
    },
    {
      id:2,
      name: "sample name 2"
    }
  ]
  const [selectItem, setSelectItem] = useState('None');
  return (
    <>
      <Child1 items={listItems} updateIndex={setSelectItem}/>
      <Child2 selectItem={selectItem}/>
    </>
  )
} 

export default function App() {
  return (
    <div className="App">
      <ParentComponent/>
    </div>
  );
}