通过道路传递道具到页面的问题

我是ReactJs的新手。我创建了一个用户填充网格的小应用程序，当点击与用户关联的按钮时，应用程序将重定向到包含有关用户信息的页面（作为道具传递）。我已经使用路由器来处理这个页面请求：通过道路传递道具到页面的问题

<Router> 
<Route path="/" header="Main Page" component={() => (<MainPage content={users}/>)}> 
</Route> 
<Route path="/UserName" header="User Page" component={UserPage}/> 
</Router>

网格页面，它工作正常，并获取数据从父组件道具如下：

var React = require('react'); 
var ReactRouter = require('react-router'); 
var Link = ReactRouter.Link; 
var Prompt = require('../components/Prompt'); 

var UsersList = React.createClass({ 
    accessUserInfo: function (user) { 
    this.context.router.push('/UserName', query={user}); 
    }, 
    render: function(){ 
    return(
     <form> 
     <table> 
     <tbody> 
     <tr> 
      <th>Name</th> 
      <th>Surname</th> 
      <th>Day of Birth</th> 
      <th>Username</th> 
      <th>Role</th> 
      <th></th> 
     </tr> 
     {this.props.content.map(function(user, i) { 
      return (
      <tr key={i}> 
       <td>{user.name}</td> 
       <td>{user.surname}</td> 
       <td>{user.birthday}</td> 
       <td>{user.userName}</td> 
       <td>{user.userRole}</td> 
       <td> 
       <Link> 
        <button type="submit" onSubmit={this.accessUserInfo(user)}>Open</button> 
       </Link> 
       </td> 
      </tr> 
     ); 
     }.bind(this))} 
     </tbody> 
     </table> 
    </form> 
    ) 
}

}）

UsersList.contextTypes = { 
    router: React.PropTypes.object.isRequired 
} 

module.exports = UsersList;

用户页面，很基本的，如下：

var React = require('react'); 

var UserPage = React.createClass({ 
    render: function() { 
    return(
    <table> 
    <tbody> 
    <h1> 
    Information for User {this.props.user.userName} 
    </h1> 
    <tr> 
     <td>Name: </td> 
     <td>{this.props.user.name}</td> 
     </tr> 
    <tr> 
     <td>Surname: </td> 
     <td>{this.props.user.surname}</td> 
    </tr> 
    <tr> 
     <td>Role: </td> 
     <td>{this.props.user.userRole}</td> 
    </tr> 
    </tbody> 
    </table> 
)

}}）;

module.exports = UserPage;

我有2个问题：

的accessUserInfo（）方法被调用用于阵列中的每个项目，而不管国税发被点击按钮
用户页面加载，但用户道具没有传递到组件，因为我得到

无法读取的不确定
01房产“用户名”

任何帮助将非常感激，谢谢提前

来源

2016-09-22 Anto

后尝试这样'的onSubmit = {（）=> this.accessUserInfo（用户）}' – elmeister

为了避免accessUserInfo()被称为对于每个项目，使用箭头功能sintax：onSubmit={()=>this.accessUserInfo(user)}

但是，我认为你不需要这种方法并且您需要稍微更改设计，因为您无法将对象作为属性发送。例如，如果您要发送用户的ID（为了从商店或API获取UserPage组件的用户），可以直接使用链接设置属性。这是解释here。只要使用，例如

<Link to={"UserName/"+userId}></Link>

改变路由至类似

<Route path="/UserName/:userId" header="User Page" component={UserPage}/>

来源

2016-09-22 15:16:28

通过道路传递道具到页面的问题

回答

相关问题