javascript - ReactJS:初学者任务 - 添加换行符

Question

我正在尝试在 ReactJS 中构建一个聊天(用于练习)。我刚刚开始尝试它，但我不确定我的方法是否正确。我设法在主聊天 div 的输入上添加文本，但我不确定如何在主聊天 div 中的每条消息后添加 br。目前它只是连接文本。

    class Chat extends React.Component {

        constructor(props) {

            super(props);

            this.state = {
                text: props.text,
                message: ''
            }

            this.handleChange = this.handleChange.bind(this);
            this.sendMessage = this.sendMessage.bind(this);

        }

        handleChange(event) {
            this.setState({message: event.target.value});
        }

        sendMessage(event) {

            event.target.value = ''

            this.setState((state, props) => ({
                text: this.state.text + this.state.message, // I tried here to add a br but with no success
                message: ''
            }));

            event.preventDefault();

        }

        render() {
            return (
                <div>
                    <div>
                        {this.state.text}
                    </div>

                    <form onSubmit={this.sendMessage}>
                        <input type="text" value={this.state.message} onChange={this.handleChange} />
                        <input type="submit" value="Submit" />
                    </form>

                </div>
                );
        }
    }

    ReactDOM.render(
        <Chat text='' />,
        document.getElementById('root')
    );

Answer 1

我会尝试使用一个元素数组(可能是 div 的)，每个消息对应一个元素，而不是使用单个字符串来表示所有消息。 div 的默认显示将为您提供每条消息之间的休息时间。然后您可以自行设置样式以添加更多间距或任何您想要的内容。

看这里:

class Chat extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            messages: [],
            message: ''
        }

        this.handleChange = this.handleChange.bind(this);
        this.sendMessage = this.sendMessage.bind(this);
    }

    handleChange(event) {
        this.setState({message: event.target.value});
    }

    sendMessage(event) {
        let messages = this.state.messages;
        messages.push(
            <div key={this.state.messages.count + 1}>
                {this.state.message}
            </div>
        );

        this.setState({
            messages: messages, 
            message: '',
        });

        event.preventDefault();
    }

    render() {
        return (
            <div>
                <div>
                    {this.state.messages}
                </div>

                <form onSubmit={this.sendMessage}>
                    <input type="text" value={this.state.message} onChange={this.handleChange} />
                    <input type="submit" value="Submit" />
                </form>
            </div>
        );
    }
}

ReactDOM.render(
    <Chat />,
    document.getElementById('root')
);