Javascript ReactJS：初学者任务-添加换行符

我正在尝试在ReactJS中构建聊天（用于练习）。我刚开始玩弄它，但我不确定我的方法是否正确。我设法在主聊天室的输入中添加了文本，但我不确定如何在主聊天室的每条消息后添加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')
    );

类聊天扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
文本：props.text，
消息：“”
}
this.handleChange=this.handleChange.bind（this）；
this.sendMessage=this.sendMessage.bind（this）；
}
手变（活动）{
this.setState（{message:event.target.value}）；
}
发送消息（事件）{
event.target.value=“”
this.setState（（状态，道具）=>({
text:this.state.text+this.state.message，//我试图在此处添加br，但没有成功
消息：“”
}));
event.preventDefault（）；
}
render（）{
返回(
{this.state.text}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

我会尝试使用一个元素数组（可能是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')
);

类聊天扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
信息：[]，
消息：“”
}
this.handleChange=this.handleChange.bind（this）；
this.sendMessage=this.sendMessage.bind（this）；
}
手变（活动）{
this.setState（{message:event.target.value}）；
}
发送消息（事件）{
让messages=this.state.messages；
messages.push(
{this.state.message}
);
这是我的国家({
信息：信息，
消息：“”，
});
event.preventDefault（）；
}
render（）{
返回(
{this.state.messages}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

您可以在两个变量之间添加

'\n'

，也可以使用模板文本

对于模板文字，插入源中的任何新行字符、制表符、空格等都将成为字符串的一部分

sendMessage(event) {
   event.target.value = ''
   this.setState((state, props) => ({
      text: this.state.text + '\n' + this.state.message ,
      // using template literals
      // text: `${this.state.text}
// ${this.state.message}` ,
      message: ''
   }));
   event.preventDefault();
}

但是您应该使用

pre

元素来包装字符串，因为它保留换行符，否则react只会渲染字符串

sendMessage(event) {
   event.target.value = ''
   this.setState((state, props) => ({
      text: this.state.text + '\n' + this.state.message ,
      // using template literals
      // text: `${this.state.text}
// ${this.state.message}` ,
      message: ''
   }));
   event.preventDefault();
}

和在渲染方法中

<div>
   <pre>{this.state.text}</pre>
</div>

{this.state.text}

这不是您要问的，但我认为最好将消息推送到一个数组，并将其映射到一个列表/段落。这样您就不需要手动换行