Question

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

我是ES6和React的新手，我无法想象如何在JSX中使用这个逻辑。我正在使用redux将我的状态映射到道具。为简洁起见，我将代码切割成最简单的形式。

def greeting(info_pairs):
    for event, person in info_pairs:
         print("Happy " + event + ", dear " + person + ".")

greeting([("Birthday", "Emily"), ("New Year", "Mark")])

这是我的示例JSON数组。

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

Answer 1

您可以使用messages数组创建一个JSX元素数组，这些元素可以在另一个JSX表达式中用于呈现。

由于您希望首先显示包含from_id == 1的邮件，因此您可以使用Array#sort订购邮件数组（以避免将messages变为浅层副本数组是使用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为组件添加逻辑

1 个答案: