我怎样才能在我的其他组件中获取或查看 prop 值？

Question

专家们正在学习阶段，我想知道如何从搜索栏中获取文本输入值并将其传递给我的另一个组件，我有一个 API URL作为搜索查询。

我看过很多使用道具的视频，我想这是在组件之间发送数据的正确方法，如果没有错的话。但是，我尝试使用它，但遇到了问题。我看不到从我的导航组件（文本文件值）传递到产品组件的道具值。

任何帮助我该怎么做。

如果能提供源码说明就更好了

另请在下面找到相关代码：

请在此处查看完整代码https://codesandbox.io/s/determined-nightingale-m2mtn?file=/src/App.js

这是我的导航组件上的代码，我希望将 onchange 值传递给产品组件。

const Navbar = () =>{

const[searchText, setSearchText] = useState();

const handleChange = (event) =>{
    setSearchText(event.target.value)
}

return (
    <>
    <div className="nav_main">
        <div className="logo_main">
            <Link exact to='/home' className="logo" > Movie </Link>
        </div>
        <div className="search_main">
        <TextField
            id="input-with-icon-textfield"
            className= "searchTextStyle"
            size= "small"
            placeholder="search"
            variant="standard"
            value = {searchText}
            onChange = {handleChange}
            InputProps={{
                    startAdornment: (
                        <InputAdornment position="start">
                        <SearchIcon style={{color:'white'}} />
                        </InputAdornment>
                    ),
                    }}
        />
        </div>
        <div className="nav_menu">
        <NavLink exact activeClassName= "active_link"  to='/home' className="navitems"   > Home  </NavLink>
        <NavLink exact activeClassName= "active_link"  to='/about'className="navitems" > About </NavLink>
        <NavLink exact activeClassName= "active_link"  to = '/products' className="navitems" > Products </NavLink>
        <IconButton className="account_icon">
            <AccountCircleIcon fontSize="small"/>
        </IconButton>
        
        </div>
    </div>
    
    </>
)
};

    export default Navbar;

产品组件：

const Produts = (props) =>{
    
   
    console.log(props.value);
 return (
        <> 
           <h1>{`http://api.themoviedb.org/3/search/movie?api_key=Mykey&query=${props.value}`}</h1>
        </>
    )
};
export default Produts;

谢谢

Answer 1

NavLink 具有可以使用的附加属性。 'to' 属性不必只是一个字符串值。例如：

<NavLink exact activeClassName= "active_link" to = '/products' className="navitems" > Products </NavLink>

可以改写为

to={{
   pathName: '/products', 
   someProps:{data: 'Place any Data here'} 
}} 
className="navitems" > Products </NavLink>

然后在您的产品组件中，您应该能够使用 this.props.location.someProps.data 检索数据。

看看这些文章： https://reactrouter.com/web/api/Link/to-object, https://medium.com/@bopaiahmd.mca/how-to-pass-props-using-link-and-navlink-in-react-router-v4-75dc1d9507b4

他们准确地概述了应该如何使用它。

Answer 2

你好吗？

发生的情况是，没关系，您正在从输入中获取数据，但您没有将其转发给要使用该数据的其他组件。

你怎么做到的？

因为它们是 'sibling' 组件，我建议你把 handleChange 和你要保存数据的 useState 放在 FATHER 组件中，传递它们通过用户键入的组件的道具，然后也通过您将要使用它的组件的道具传递存储的数据。

让我举一个实际的例子来说明如何做到这一点：

在 App 上，您处理状态并通过 props 为组件提供它。

    function App() {
  const [searchText, setSearchText] = useState();

  const handleChange = (event) => {
    setSearchText(event.target.value);
  };


  return (
    <>
      <Navbar handleChange={handleChange} searchText={searchText}/>
      <Switch>
        <Route path="/products" 
        render= { (props) => <Produts {...props} searchText={searchText} /> }
 />
      </Switch>
    </>
  );
}

在 NavBar 组件中，您可以通过 props 获取它们，对其进行解构：

const Navbar = ({handleChange, searchText}) => {


  return (
    <>
      <div className="nav_main">
        <div className="logo_main">
          <Link exact to="/home" className="logo">
            {" "}
            Movie{" "}
          </Link>
        </div>

并且在 Produts 组件中，您也可以通过道具获得它们：

const Produts = (props) => {
  console.log(props.searchText);

  const classes = useStyles();
  const [movieData, setMovieData] = useState([
    // the below is an fake api data which needs to be deleted when final disgn is ready and add real api from useEffect
    {
      adult: false,

请注意，在您获得“props.value”之前，您在组件中获得的名称与您用于从提供者组件传递的名称相同，在本例中为 'searchText'.

tl;博士

您需要通过道具传递它们，选择一个名称，然后使用相同的名称从另一端获取它们。要获取它们，您可以使用 'props.PROP_NAME' 或者您可以使用解构方法并直接获取名称。此外，要通过 Router 渲染的组件传递道具，您必须使用以下语法：

render= { (props) =>

在 NavBar 和 Produts 组件上，我使用了不同的方法，因此您可以看到，您可以同时使用这两种方法来获取道具信息。

希望对您有所帮助，无论如何我都可以提供进一步的解释。

我怎样才能在我的其他组件中获取或查看 prop 值？

How can I get or see prop value in my other component?

javascript

reactjs

mern

react-hooks