Question

我正在使用react-react对项目做出反应，我需要将路径传递给子组件。

我有这个设置：

App.js

<?php
if (isset($_POST['update'])){
$sql = "UPDATE accounts SET download='Yes' WHERE id=15 ";
}

?>

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<form  method="post" >  

  <input type="submit" value="Update " name="update">
</form>

</body>
</html>

Home.js

<Switch>
  <Route exact path='/' render={()=><Home num="2" someProp={100}/>} />
  <Route path='/roster' component={Roster}/>
</Switch>

问题是主组件总是给出错误＆＃39; undefined＆＃39;。我无法理解如何解决这个问题。如果我从Home.js中删除道具，组件渲染就好了。但是当我尝试访问道具时，它会出错。

Answer 1

无状态组件不会通过this访问道具。它们作为函数的参数传入。

const Home = props => (
  <div>
    <h1>Welcome to the Tornadoes Website!</h1><p>{props.num}</p>
  </div>
)

Answer 2

<Switch>
  <Route exact path='/' render={()=><Home num="2" someProp={100}/>} />
  <Route path='/roster' component={Roster}/>
</Switch>

主页

import React from 'react'

const Home = (props) => (
  <div>
    <h1>Welcome to the Tornadoes Website!</h1><p>{props.someProp} {props.num} </p>
  </div>
)

export default Home

由于你在app.js中将你的propProp命名为acess，你需要做props.someProp，这个名字必须与你传递给它的名字相匹配。持有＆＃34; 2＆＃34;。

的num道具也是如此

示例在父组件渲染中 <Child prop1={"hello"} fun={"this is a fun prop} />

现在在孩子身上

const Child = (props) => (
<div> 
 {props.prop1} will render hello {props.fun} will render this is a fun prop 
</div>
)

在React中将道具从路径传递到组件

2 个答案: