Javascript 如何正确传递道具？_Javascript_Html_Reactjs

Javascript 如何正确传递道具？

javascript html reactjs

Javascript 如何正确传递道具？,javascript,html,reactjs,Javascript,Html,Reactjs,我试图在ReactJS中使用props传递一些值，但是，值没有传递也没有显示这是我对项目的html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React JS</title> </head> <body> <div id="app"></

我试图在

ReactJS

中使用

props

传递一些值，但是，值没有传递也没有显示

这是我对项目的

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>

这是我的

AppContainer.jsx

，它呈现

Users.jsx

组件

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

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

'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>;
    }
}

'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>            
        );
    }
}

“严格使用”；
从“React”导入React，{Component}；
导出默认类用户扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：this.props
}
}
render（）{
返回(
{this.state.user.id}
{this.state.user.name}
);
}
}

这是我的输出的屏幕截图。（在输出中，未显示

id

和

名称

，只有

显示如下：

有人能告诉我哪里做错了吗？谢谢！

您正在将道具保存到state，这是一个对象，正在执行

此操作。state.user.name

未定义，是吗

给定

props

如

key=“34”user=“objUser”

当你说

user=this.props

时，user现在变成

{key:34，user:objUser}

，要访问那些你不能访问的属性

user.name

，你需要通过执行

user.user.name

来访问user对象，因为你已经将整个props对象分配给

user

export default class User extends Component {

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

在

注意

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

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

我改变了两件事：

'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);
//remove here
}

render(){
    //get users from props 
//change here
    const {users} = this.props;

    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>
    );
}
}

“用户严格”；
从“React”导入React，{Component}；
从“道具类型”导入道具类型；
从“./User”导入用户；
导出默认类用户扩展组件{
静态get propTypes（）{
返回{
//验证用户必须是一个数组
用户：PropTypes.array
}
}
建造师（道具）{
超级（道具）；
//移到这里
}
render（）{
//从道具获取用户
//在这里换车
const{users}=this.props；
返回(
身份证件
名称
{
users.map（（用户）=>{
返回
})                       
}
);
}
}

调试的一个好方法是使用console.log并记录每个组件中的对象，以查看传递的内容。

'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);
//remove here
}

render(){
    //get users from props 
//change here
    const {users} = this.props;

    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>
    );
}
}