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

Question

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

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

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

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

enter image description here

Answer 1

您可以将数据保留在 Parent 组件中，并使用一个函数将 props 从 child 传递给 Parent。这个概念称为Lifting State Up，您可以在其中定义最高共同祖先的状态，因此所有子组件都使用相同的数据，在这种情况下是选择项

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

我认为，最简单的方法是让子组件选择正确地接受函数，例如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>
    )
}

因此，当您的子组件处理选择中的更改时，它会调用作为 prop onSelectionChanged 传递的函数。您可以将 ChildA 中所需的任何数据传递给该函数。

请注意，父组件将选择的值（来自 ChildA）保持在本地状态，然后通过 prop 将该值传递给 ChildB。

Answer 3

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

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 属性来选择图片了

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

Answer 4

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

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>
  );
}