javascript - 如何在react中将html属性设置为静态

Question

我正在构建一个 react 聊天应用程序，这是我的问题；我试图使创建的 p 元素的名为 msgSntInRm 的属性实际跟踪消息在创建时发送到哪个房间。但使用下面的代码，即使在发送/创建消息之后，属性也会根据选择的房间的状态而变化。

<div className='chatDisplay'>
    {
        this.state.testArr.map((msg, pos, array) =>
                <p className='testArr'
                    testArrPos={pos} 
                    msgSntInRm={this.state.currentRoom}>
                    {msg}
                </p>
            )
        }
</div>

我明白为什么会发生这种情况。这是我的构造函数:

class RoomList extends Component {
constructor(props) {
super(props);
this.state = {
    rooms: [],
    display: 'none',
    displayRoom: 'none',
    newRoomName: 'New room',
    currentRoom: '',
    testArr: [],
    msgSntIn: ''
};

this.roomsRef = this.props.firebase.database().ref('rooms');
}

我只是不确定如何解决这个问题。 Here is a GIST of the code

我需要将代码 this.state.currentRoom 替换为跟踪创建消息的房间的代码，并且一旦我离开房间或创建新消息，它就无法再次更改。

Answer 1

您应该将消息与房间关联起来，使用该州的当前房间不会有太大好处。

不是将消息存储为字符串数组，而是存储对象数组，每条消息将类似于:{ msg: 'bla bla', room: 'room1',//其他属性 }

这样，当您迭代消息时，您可以根据消息对象数据指定消息发送到哪个房间。