Question

我正试图绕过ReactJS并且我遇到了一个问题，我希望能够更新局部变量的值并返回更新的值。

我已经阅读了有关状态的信息，并且我在使用React Components时已经使用了它，但是，这个类只是定义为const而且它并没有扩展React.Component。

我应该以不同的方式定义设置变量吗？

以下是我的代码的简化版本：

＆＃13;

import React from 'react';

const WelcomeForm = ({welcome}) => {

    var welcomeMsg = 'Test';

    DynamicContentApi.loadDynamicContent('welcome_test').then((response) => {
       // response.text has content
       welcomeMsg = response.text;
    }).catch(() => {
        welcomeMsg = '';
    });

    return (
                <p>{welcomeMsg}</p> // Returns 'Test'
    );
};

export default WelcomeForm;

＆＃13;

Answer 1

此处最简单的选择是将无状态组件更改为有状态组件。

无状态组件只是JavaScript函数。他们接受了   可选输入，称为prop。

有状态组件提供更多功能，而更多功能带来更多便利。选择类组件（有状态）而非功能组件（无状态）的主要原因是它们可以具有状态，这是您要更新以重新呈现的内容。

以下是您可以做的事情：

class WelcomeForm extends React.Component {
  state = {
    welcomeMsg: ''
  }
  fetchFromApi() {
    DynamicContentApi.loadDynamicContent("welcome_test")
    .then(response => {
      this.setState({welcomeMsg: response.text});
    })
    .catch((e) => console.log(e));
  }
  componentDidMount() {
    fetchFromApi();
  }
  render() {
    return (
      <p>{welcomeMsg}</p>
    );
  }
};

如果您因任何原因希望保持组件无状态，则必须将loadDynamicContent()函数放在Parent上，并将文本传递给WelcomeForm as一个道具。例如：

// Your WelcomeForm Component
const WelcomeForm = ({welcomeMsg}) => (
  <p>{welcomeMsg}</p>
);

// Whatever it's Parent Component is
class Parent extends React.Component {
  state = {
    welcomeMsg: ''
  }
  fetchFromApi() {
    DynamicContentApi.loadDynamicContent("welcome_test")
    .then(response => {
      // response.text has content
      this.setState({welcomeMsg: response.text});
    })
    .catch((e) => console.log(e));
  }
  componentDidMount() {
    fetchFromApi();
  }
  render() {
    <WelcomeForm welcomeMsg={this.state.welcomeMsg} />
  }
}

Answer 2

正如评论中所建议的，您可以将DynamicContentApi逻辑传递给外部：

import ReactDOM from 'react-dom'

DynamicContentApi.loadDynamicContent('welcome_test').then((response) => {
  ReactDOM.render(<WelcomeForm data={response.text} />, document.getElementById('where you wanna render this'));
}).catch(() => {
  console.log('error while fetching...');
});

你有自己的组件：

import React from 'react';

export default class WelcomeForm extends React.Component {
  render() {
    return (
      <p>{this.props.data}</p>
    );
  }
}

更新类中的React中的变量而不是扩展组件

2 个答案: