时间戳

首页 > 解决方案 > 如何正确传递 ReactJS 道具？

javascript - 如何正确传递 ReactJS 道具？

问题描述

我正在尝试使用propsin传递一些值，ReactJS但是值没有传递没有显示。

这是我html的项目：

<!DOCTYPE html>
<html lang="en"> 
<head>    
    <meta charset="UTF-8">    
    <title>React JS</title> 
</head> 
<body>
    <div id="app"></div>
    <script src="main.jsx"></script>
</body>
</html>

这是我的main.jsx，它呈现一个名为AppContainer组件的类

'use strict';
import React from 'react';
import {render} from 'react-dom';
import AppContainer from './AppContainer';

render(<AppContainer />, document.getElementById('app'));

这是我AppContainer.jsx的渲染Users.jsx组件

'use strict';
import React, {Component} from 'react';
import Users from './Users';

export default class AppContainer extends Component{
    constructor(props){
        super(props);
        this.state = {
            users: [{id: Date.now(), name: 'John'}]
        }
    }

    render(){
        return <div>
            <h1>Hello World</h1>
            <Users users={this.state.users}/>
        </div>;
    }
}

这是我Users.jsx的渲染User.jsx组件的类

'user strict';
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import User from './User';

export default class Users extends Component{
    static get propTypes(){
        return {
            //validate users must be an array
            users: PropTypes.array
        }
    }

    constructor(props){
        super(props);
        this.state ={
            man: this.props
        }
    }

    render(){
        //get users from props 
        const {users} = this.state.man;

        return (
            <div>
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            users.map((user) => {
                                return <User key={user.id} user={user}  />
                            })                       
                        }
                    </tbody>
                </table>
            </div>
        );
    }
}

这就是我User.jsx猜值没有正确传递给props

'use strict';
import React, {Component} from 'react';

export default class User extends Component{   
    constructor(props){
        super(props);
        this.state = {
            user: this.props
        }
    }

    render(){        
        return(
                <tr>
                    <td>{this.state.user.id}</td> 
                    <td>{this.state.user.name}</td>                
                </tr>            
        );
    }
}

这是我的输出的截图。（在输出中，id和name没有显示，仅<th>显示如下：

截屏

谁能告诉我我哪里做错了？谢谢！

标签： javascripthtmlreactjs

解决方案

您正在将道具保存到状态，这是一个对象，做this.state.user.name变得未定义，做

给定props喜欢key="34" user="objUser"

当您说user = this.props， user 现在变成{key: 34, user: objUser}，要访问那些您不能访问的属性时user.name，您需要通过 do 访问 user 对象，user.user.name因为您已将整个 props 对象分配给user。

export default class User extends Component {

    constructor(props){
      super(props);
      this.state = {
        user: this.props.user
     }
   }
  // rest of the code
 }

做同样的事情<Users />

export default class Users extends Component{
    static get propTypes(){
        return {
           //validate users must be an array
           users: PropTypes.array
        }
    }

    constructor(props){
        super(props);
        this.state ={
          man: this.props.users
        }
    }
   // rest of the code
  }

笔记

如果值不会改变，您实际上不需要将值保存在状态中。您可以直接通过道具访问该值。喜欢

render() {
   const user =  this.props.user
   const man = this.props.man
   // etc
}

推荐阅读