Question

我对react.js非常陌生。我需要实现Class中知道的构造函数和更多函数。所以下面是我想将Arrow函数转换为Class的代码。请帮助我对React.js还是很新的

    const CreateArea = () => {

          const [content, setContent] = useState('')


          function onSubmit(e){
            e.preventDefault()

            var date = moment().utcOffset('+05:30').format('hh:mm A DD-MM-YYYY');

            firebase.firestore().collection('qna').add(
            {
              title: "James",
              content,
              time: new Date(),
              time2: date,
              status: "0"
            })
            .then(() => {
              setContent('')
              swal({
                title: "Question Submitted!",
                text: "Your Question is waiting for Approval.",
                icon: "success",
                button: "Close",
                });
            })
          }

          return (
            <div id="footer">
              <form onSubmit={onSubmit}>
                <textarea
                  name="content"
                  onChange={e => setContent(e.currentTarget.value)}
                  value={content}
                  placeholder="Enter Your Question"
                  rows="2"
                  required
                />
                <button></button>

              </form>

            </div>
          );

        }

类似此类

class CreateArea extends React.Component {

    // Some Code ....

    }

Answer 1

替换

const [content, setContent] = useState('')

使用

constructor(props) {
    super(props);
    this.state = {content: ''};
}

替换

setContent('');

使用

this.setState({content: ''})

并使用this.state.content

进行访问

将返回函数放在render（）中：

render() { 
    return ( 
        <div id="footer">
        ....
    );
}

现在每个函数都需要与此一起调用，例如：

<form onSubmit={this.onSubmit}>

Answer 2

好，要将函数组件转换为类组件，必须使用this.state初始化状态，然后声明一个将实际显示内容的渲染函数，如以下示例所示：

class CreateArea extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      test: "test"
    };
  }

  render() {
    return (
      <div>
        content here
      </div>
    );
  }
}

Answer 3

它看起来像这样：

import * as React from 'react';

export default class CreateArea extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            content: ''
        };
    }

    onSubmit(e) {
        e.preventDefault();

        var date = moment().utcOffset('+05:30').format('hh:mm A DD-MM-YYYY');

        firebase.firestore().collection('qna').add(
            {
                title: 'James',
                this.state.content,
                time: new Date(),
                time2: date,
                status: '0'
            })
            .then(() => {
                this.setState({content: ''});
                swal({
                    title: 'Question Submitted!',
                    text: 'Your Question is waiting for Approval.',
                    icon: 'success',
                    button: 'Close',
                });
            });
    }

    render(): React.ReactNode {
        return (<div id="footer">
            <form onSubmit={this.onSubmit.bind(this)}>
                <textarea
                    name="content"
                    onChange={e => this.setState({content: e.currentTarget.value})}
                    value={this.state.content}
                    placeholder="Enter Your Question"
                    rows="2"
                    required
                />
                <button></button>

            </form>

        </div>);

    }
}

最重要的细节是在构造函数中设置状态，添加render方法并将setContent调用替换为setState。

如何在React.js中将Arrow函数转换为类

3 个答案: