Question

我正在尝试使用props中的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>，如下所示：

有人可以告诉我我做错了什么吗？谢谢！

Answer 1

您正在将道具保存为状态，这是一个对象，@Override protected FilterRegistration.Dynamic registerServletFilter(ServletContext servletContext, Filter filter) { FilterRegistration.Dynamic filterRegistration = servletContext.addFilter("encodingFilter", new CharacterEncodingFilter()); filterRegistration.setInitParameter("encoding", "UTF-8"); filterRegistration.setInitParameter("forceEncoding", "true"); filterRegistration.addMappingForUrlPatterns(null, true, "/*"); return super.registerServletFilter(servletContext, filter); }变得不确定，那么

像this.state.user.name一样给props

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

user.user.name

在user

中执行相同操作

export default class User extends Component {

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

注意

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

<Users />

Answer 2

我改变了两件事：

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

如何正确传递ReactJS道具？

2 个答案: