ReactJS 语义 UI 评论视图

ReactJS 是当今广泛使用的 JavaScript 库之一，专注于构建用户界面的组件化。

在 ReactJS 中，语义 UI 能够为开发人员提供一种方便轻松的组件创建方式。这些组件在外形和行为上都符合用户期望，且可以被开发者轻松自定义和扩展。

评论视图作为应用中不可或缺的一部分，也可以通过 ReactJS 语义 UI 实现。下面是如何用 ReactJS 实现一个评论视图的简单示例。

首先需要引入必要的库和组件：

import React from 'react';
import { Comment, Avatar, Form, Button, List, Input } from 'semantic-ui-react';

然后创建一个组件类 CommentView，使用语义化的标签、组件和样式：

class CommentView extends React.Component {
  state = {comment: ''};
  handleChange = (e, { value }) => this.setState({ comment: value });
  handleSubmit = () => {
    console.log(`Submitted ${this.state.comment}`);
    this.setState({ comment: '' });
  };
  render() {
    const { comment } = this.state;
    return (
      <Comment.Group>
        <Comment>
          <Comment.Avatar src='https://react.semantic-ui.com/images/avatar/small/matt.jpg' />
          <Comment.Content>
            <Comment.Author>Anonymous</Comment.Author>
            <Comment.Metadata>
              <div>Today at 5:42PM</div>
            </Comment.Metadata>
            <Comment.Text>Hello!</Comment.Text>
            <Comment.Actions>
              <Comment.Action>Reply</Comment.Action>
            </Comment.Actions>
          </Comment.Content>
        </Comment>
        <Form reply onSubmit={this.handleSubmit}>
          <Form.Input placeholder='Add your comment...' value={comment} onChange={this.handleChange} />
          <Button content='Add Comment' labelPosition='left' icon='edit' primary />
        </Form>
      </Comment.Group>
    );
  }
}

其中 handleChange、handleSubmit 两个函数分别用于输入框 text 变化和提交操作。由于该组件是状态型组件，因此需要在 constructor 中初始化状态 state，并在 render 方法中展示出来。

最后在应用中使用该组件即可：

function App() {
  return (
    <div className='App'>
      <CommentView />
    </div>
  );
}

应用中展示效果如下：

通过使用 ReactJS 语义 UI，我们可以快速方便地创建符合用户期望的评论视图，并实现自定义样式和交互行为。