0

我是菜鸟，我正在尝试按照本教程编译 JSX：

http://xabikos.com/2015/03/18/Using-Reactjs-net-in-Web-Forms/

使用 reactjs.net``

在我的 helloWorld.jsx

class PageContent extends React.Component {


    componentDidMount() {
               this.state = { name: "Hello World from ComponentDidMount" };
    }

    constructor(props) {
        super(props);
        this.state = { name: "Hello World" };
    }

    componentWillMount() {
        this.state = { name: "Hello World from ComponentWIllMount" };
    }

    render() {

        return <h1>{this.state.name}</h1>
    }

}

在我的 ReactConfig.cs

        ReactSiteConfiguration.Configuration
        .AddScript("~/Scripts/components/helloWorld.jsx");

在我的 Default.aspx.cs

        var env = AssemblyRegistration.Container.Resolve<IReactEnvironment>
        ();
        var objectModel = new { user = "React User" };
        var reactComponent = env.CreateComponent("PageContent", 
        objectModel);

        PageContent.Text = reactComponent.RenderHtml();

该页面似乎工作正常

它打印

“来自组件的 Hello World 将挂载”

但是当我评论 Component Will Mount 时，我没有从 DidMount 收到任何东西，它只打印

“你好世界”

有谁知道为什么这个方法从来没有被调用过？

先感谢您

4

1 回答 1

2

你的问题是你没有使用this.setState. 您正在手动分配一个新值this.state。React 不知道render再次调用来更新您的组件，这就是您的组件不更新的原因。不是this.state没有改变。这是 React 没有被告知更新屏幕上显示的内容。因此，就生命周期而言，您的代码会发生以下情况：

  1. constructor: 初始化一切（呃）
  2. componentWillMount: 在你的情况下，设置this.state.name. 渲染还没有发生
  3. render: 渲染this.state.name，你已经在你的componentWillMount
  4. componentDidMount：设置this.state.name为您的新值。没有更新渲染功能的说明

如果你this.forceUpdate()在你的componentDidMount, 在你分配this.state.name给它的新值之后使用它，我相信它会更新，但这是非常糟糕的做法。改为使用this.setState。

componentDidMount() {
    this.setState({ name: "Hello World from ComponentDidMount" });
}

componentWillMount() {
    this.setState({ name: "Hello World from ComponentWillMount" });
}

正如您在代码中注意到的那样，在this.setState中并不完全需要componentWillMount，因为render尚未调用。但保持一致是很好的。

于 2017-10-04T10:07:26.720 回答