ReactJS ES6 向组件添加逻辑

Question

我有一个聊天功能，我正在尝试在我的 JSX 代码中显示一组消息，其中根据对象中的值有条件地呈现 className。

我真的是 ES6 和 React 的新手，我不知道如何在 JSX 中处理这个逻辑。我正在使用 redux 将我的状态映射到道具中。为简洁起见，我将代码简化为最简单的形式。

class ChatWidget extends Component {

  render() {
    return (
      <div className={chat.body}>
        {/* if from_id == 1 */}
        <div className={chat.float-right}>
            <p>  {/* message of from_id==1 */} </p>            
        </div>
        {/* else */}
        <div className={chat.float-left}>
            <p> {/* else message here */} </p>               
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    messages: state.messages
  };
}

这是我的示例 JSON 数组。

[
        {   
            msg_id: 1,
            to_id: 1,
            from_id: 2,
            message_id: "Marzipan jelly-o croissanty"
        },
        {   
            msg_id: 2,
            to_id: 2,
            from_id: 1,
            message_id: "Jelly sw"
        }
]

Answer 1

您可以使用 messages 数组创建一个 JSX 元素数组，该数组可以在另一个 JSX 表达式中用于渲染。

由于您希望带有 from_id == 1 的消息首先出现，您可以使用 Array#sort to order the messages array
(to avoid mutating messages a shallow copy of the array is made using Array#slice).

然后在新返回的数组上调用 Array#map 以遍历排序的消息，在每次迭代时创建新的 JSX。

代码可能如下所示：

class ChatWidget extends Component {

  render() {
    // deconstruct messages from props
    const {messages} = this.props;

    // Mutating data should be avoided and Array#sort mutates 
    // the array so we use Array#slice to create a 
    // shallow copy before we sort it
    const msgCopy = messages.slice();

    // sort messages so message where from_id === 1 is first
    const sorted = msgCopy.sort((a,b) => {
      return a.from_id - b.from_id;
    });

    // iterate through sorted array to create 
    // an array JSX elements
    sorted.map(message => {
      const {from_id, message_id} = message;

      // Change class if from_id is 1
      const classToAdd = (from_id === 1) ? ('chat.convo + ' ' + chat.them'):('chat.convo');

      return (
        <div className={classToAdd}>
          <div className={chat.text}>
            <p>  { message_id } </p>            
          </div>
        </div>
      );
    });

    // use sorted array as follows to create a div containing
    // a child div for each message
    return
    (
      <div className={chat.body}>
        {sorted}
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    messages: state.messages
  };
}

ReactJS ES6 向组件添加逻辑

ReactJS ES6 adding logic to the component

jsx

ecmascript-6

reactjs

react-jsx