时间戳

首页 > 解决方案 > 如何在反应js中将数据从一个组件传递到另一个组件

javascript - 如何在反应js中将数据从一个组件传递到另一个组件

问题描述

所以我想做的是，我想将在标题搜索栏中收集的数据传递给另一个组件，以便我可以在该组件上使用它作为我将要使用的 API 的查询

标头组件：

import ImageSearchIcon from '@material-ui/icons/ImageSearch';

import './Header.css'

function Header() {

    const [query, setQuery] = useState("");

    const handleSubmit = (event) => {
        event.preventDefault();
      }
    

    return (
        <div className="Header">
            {/* LOGO */}
            <div className="branding">
                <ImageSearchIcon className="branding__logo" fontSize="large"/>
                <h1>Image Finder</h1>
            </div>

            {/* Search Bar */}
            <form onSubmit={handleSubmit}>
                <input type="text" id="header__searchbar" placeholder="Search For Images" value={query} onChange={(e) => setQuery(e.target.value)} />
            </form>
            

            {/* USER ICON */}
            <img className="user__image" src="https://www.pngitem.com/pimgs/m/150-1503945_transparent-user-png-default-user-image-png-png.png" alt="user__image" />


        </div>
    )
}

export default Header

第二个组成部分：


import './Imagelist.css'

const Imagelist = () => {

    
    return (
        <div className="Imagelist">
            
        </div>
    )
}

export default Imagelist

标签： javascriptreactjsreact-hooks

解决方案

props您可以在 React 中使用（认为是props组件的参数）在父组件和子组件之间传递数据。

这是传递的props样子：

// Header component

const Header = () => {
  // ... your logic
  return (
    <ImageList myProp={query} />
  );
}

// ImageList component
const ImageList = ({ myProp }) => {
  // now you can use myProp inside this component
};

你可以在这里获得更多关于 props 和 React 的信息。

推荐阅读