Question

嗨，我需要将两个参数传递给类Chat。当前，它仅获取一个参数并正确显示。

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

    </div>
);

从Home.js调用此Chat.js文件。假设我需要向Chat组件传递两个参数，然后像下面这样尝试。

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

在这种情况下，我应该如何更改Chat组件以接受两个参数并在div标签内显示。这就是我尝试过的。但这似乎是不正确的。

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

    </div>
);

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

}

Answer 1

您必须分别传递它们：

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

Answer 2

您可以通过使用单独的属性传递不同的道具来做到这一点。因此，例如，您可以像这样修改<Home/>组件的render方法：

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

然后从<Chat />组件内部访问这两部分数据（消息和名称），您可以执行以下操作：

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

希望这会有所帮助！

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

2 个答案: