Reactjs 如何接受和传递两个参数作为道具

嗨，我需要传递两个参数，到课堂聊天。目前，它只获取一个参数并正确显示

const Chat = props => (
    <div >
        <ul>{props.messages.map(message => <li key={message}>{message}</li>)}</ul>

    </div>
);

const Chat=props=>(
{props.messages.map（message=>
{message}
）}
);

此Chat.js文件是从Home.js调用的。假设我需要向聊天组件传递两个参数，我尝试了以下方法

import React, { Component } from 'react';
import { User } from './User';
import  Chat  from './Chat';

export class Home extends Component {
    displayName = Home.name

    state = {
        messages: [],
        names: []
    };

    handleSubmit = (message,name) =>
        this.setState(currentState => ({
            messages: [...currentState.messages, message],
            names: [...currentState.names,name]

    }));

    render() {
        return (
            <div>
                <div>
                    <User onSubmit={this.handleSubmit} />
                </div>
                <div>
                    <Chat messages={this.state.messages,this.state.name} />
                </div>
            </div>
        );
    }
}

import React，{Component}来自'React'；
从“/User”导入{User}；
从“./Chat”导入聊天；
导出类Home扩展组件{
displayName=Home.name
状态={
信息：[]，
姓名：[]
};
handleSubmit=（消息、名称）=>
this.setState（currentState=>({
消息：[…currentState.messages，message]，
名称：[…当前状态。名称，名称]
}));
render（）{
返回(
);
}
}

在这个场景中，我应该如何更改聊天组件以接受两个参数并在div标记中显示。 这就是我试过的。但这似乎是不正确的

const Chat = props => (
    <div >
        <ul>{props.messages.map((message, name) => <li key={message}>{message}</li> <li key={name}>{name}</li>)}</ul>

    </div>
);

const Chat=props=>(
{props.messages.map（（message，name）=>
{message}
{name}
）}
);

PS：用户方法

import * as React from 'react';

export class User extends React.Component{

    constructor(props) {
        super(props);

        this.state = {
            name: '',
            message: ''

        }
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    render() {
        return (

            <div className="panel panel-default" id="frame1" onSubmit={this.handleSubmit}>

            <form className="form-horizontal" action="/action_page.php" >
                <div className="form-group">
                    <label className="control-label col-sm-2" htmlFor="name">Your Name </label>
                    <div className="col-sm-10">
                        <input type="text" className="form-control" name="name" placeholder="Enter your Name"  onChange={this.handleChange} />
                    </div>
                </div>
                <div className="form-group">
                    <label className="control-label col-sm-2" htmlFor="message">Message</label>
                    <div className="col-sm-10">
                        <input type="text" className="form-control"  name="message" placeholder="Enter your Message" onChange={this.handleChange}/>
                    </div>
                </div>
                <div className="form-group">
                    <div className="col-sm-offset-2 col-sm-10">
                        <button type="submit" id="submit" className="btn btn-default">Submit</button>
                        </div>
                    </div>
                </form>
                </div>
       );
    }

    handleChange(evt) {
        this.setState({ [evt.target.name]: evt.target.value });
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.onSubmit(this.state.message, this.state.name);
        this.setState({ message: "" });
        this.setState({name:""});
    };

}

import*as React from'React'；
导出类用户扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
消息：“”
}
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleChange=this.handleChange.bind（this）；
}
render（）{
返回(
你的名字
消息
提交
);
}
手柄更换（evt）{
this.setState（{[evt.target.name]：evt.target.value}）；
}
handleSubmit=（e）=>{
e、 预防默认值（）；
this.props.onSubmit（this.state.message、this.state.name）；
this.setState（{消息：'}）；
this.setState（{name:}）；
};
}

您必须单独传递它们：

<Chat messages={this.state.messages} name={this.state.name} />

---

您可以通过使用单独的属性传递不同的道具来实现这一点。例如，您可能会修改

组件渲染方法，如下所示：

 <Chat messages={this.state.messages} names={this.state.names} />

然后，要从

组件内部访问这两位数据（消息和名称），您可以执行以下操作：

const Chat = props => (
    <div >
        <ul>{props.messages.map((message, index) => <li key={message}>
            From: { Array.isArray(props.names) ? props.names[index] : '-' } 
            Message: {message}</li>)}
        </ul>    
    </div>
);

const Chat=props=>(
{props.messages.map（（消息，索引）=>

From:{Array.isArray（props.names）？props.names[索引]：'-'}
消息：{Message}
）}

);

---

希望这有帮助

谢谢。不幸的是，我仍然看不到这个名字。正如您所看到的，name也是一个数组。所以我需要在列表中的消息前面打印它。如前所述，发送消息的用户仍然运气不佳。正在获取此错误。。。无法获取未定义或空引用的属性“0”。这是否意味着没有值传递给name？我还更新了我的用户方法，以检查我是否遗漏了一些内容（欢迎您，很高兴我能提供帮助：-），这是因为在

消息

数组上调用了

map（）

函数，这使得访问每个

消息

变得微不足道，其中，要访问相应的名称，需要使用索引获取与您所打赌的当前消息对应的名称-祝您的项目一切顺利：-）谢谢。：）措辞很好