Question

如何在REACT中将某个列表从一个组件传递到另一个组件？这是代码，我无法将LIST传递给其他组件。我尝试了很多方法，但仍然无法通过列表。

请我解决问题。因此，我想在另一个组件中使用提取的LIST。

子组件（在父组件的同一js中）

import React, { useState, useEffect } from "react";
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
import AddBoxIcon from '@material-ui/icons/AddBox';
import ExposureIcon from '@material-ui/icons/Exposure';
import HighlightsData from "./HighlightsData";


 export function HighlightsGrid(props){
 const [name, setTitle] = useState(props.title);
 const [image, setImage] = useState(props.imgsrc);
 const [amount, setAmount] = useState(props.price);

 const  LIST=[name, image, amount];
 
const onSubmit=()=>{
       const LIST={image, name, amount}
       console.log(datas)           
  }

 return(
    <div className="carddd">
        <li className="card-item double">
            <a href="#">
            <h1 className="heightLight">Highlight</h1>
            
            <div className="highlights">
                <figure className="card">
                <img src={props.imgsrc} alt="img." value={image} onChange={e=>setImage(e.target.value )}/>
                <button  onClick={onSubmit}  className="likeBtn">
                    <FavoriteBorderIcon />
                    400
                </button>
                <figcaption className="caption">
                    <h3 className="caption-title" value={name} onChange={e=>setTitle(e.target.value)}>{props.title}</h3>
                    <p>
                    {props.desc}
                    </p>
                </figcaption>
                </figure>
            </div>
            </a>
            <nav id="single-na" className="single-na menu" role="navigation">
            <ul>
                <li>
                <a value={amount} onChange={e=>setAmount(e.target.value )} className="default">
                    Nrs: <b>{props.price}</b>
                </a>
                </li>
                <li className="defs">
                <button>
                    <ExposureIcon />
                </button>
                add to shop
                </li>
                <li className="defs">
                <button >
                    <AddBoxIcon />
                </button>
                Add To Cart
                </li>
            </ul>
            </nav>
        </li>
        </div>
 )
}

父组件

    function Highlights(){  
    return(    
    <>        
     {HighlightsData.map((val,index)=>
        {
            return(
            <HighlightsGrid
                key={val.id}
                imgsrc={val.imgsrc}
                title={val.title}
                desc={val.desc}
                price={val.price}
                />
                 );
        })}            
    </>
  );
}

 export {Highlights } ;

Answer 1

只需通过将列表作为道具即可将列表从父级传递到子级。

Parent.js

CASE
  WHEN REGEXP_MATCH(Event, "^(event 1|event 2|event 3)$") THEN "LINE 1"
  WHEN REGEXP_MATCH(Event, "^(event 4|event 5|event 6)$") THEN "LINE 2"
  WHEN REGEXP_MATCH(Event, "^(event 7|event 8|event 9)$") THEN "LINE 3"
  ELSE "LINE 4"
END

和Child.js为

import React from "react";
import Child from "./Child";

import "./App.css";

function App() {
const List = [1, 3, 2, 4, 5];

  return (
    <div className="App">
      <Child list={List} />
    </div>
  );
}

export default App;

这将给出结果

Result

Answer 2

考虑到您要将列表传递给既不是列表来源子项也不是其父项的另一个组件，我建议使用context。

简而言之，您将需要在更高级别上创建一个上下文提供程序，以便它既是列表的原始位置（您将在其中更新上下文状态）又是需要使用它的组件的父级（它将上下文状态更改时重新渲染。）

如果您向我们提供了有关使用列表的组件位于何处以及如何使用它的更多信息，我可以提供一个更实际的答案。

如何将某个LIST从一个组件传递到REACT JS中的另一个组件？

2 个答案: