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

Question

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

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

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

不能很好地举例，请参阅附件截图以供其他参考。非常感谢！

enter image description here

Answer 1

您可以将数据保留在父组件中，并使用函数将道具从子组件传递给父组件。这个概念称为 Lifting State Up，您在其中定义最高共同祖先的状态，因此所有子组件都使用相同的数据，在本例中为 selectd 项目

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

我认为，最简单的方法是针对 child 组件，在该组件中进行选择以正确接受函数，例如 onSelectionChanged。如果您为传递给 child 的每个项目都有一个按钮，您可以执行以下操作：

Child 组件 A

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

Child 组件 B

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

Parent 组件

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

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

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

Answer 3

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

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

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

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

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

React JS pass the data or child component to parent component

javascript

reactjs

react-props