Question

我想从外部基本JavaScript代码更新React组件。
我知道，做到这一点的唯一方法是使用道具代替状态。
我尝试遵循旧答案（https://stackoverflow.com/a/26035935/10469201）中给出的示例，但无法使其正常工作。
另外，以这种方式频繁更新组件是否是一种不好的做法？还是有另一种方法？

编辑：我尝试过的代码：

index.html：

<div id="root"></div>
<button id='changeprop'>change name</button>

index.js：

ReactDOM.render(
  <App name="default name"/>,
  document.getElementById('root')
);

App.js：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
const $ = window.$;

export default class App extends Component {

    constructor(props) {
        super(props);
        this.name = props.name;
    }

    render() {
        return (
            <div>
                name : {this.name}
            </div>
        );
    }

}

var Wrapper = function(name, el) {
  var newName = name;
  function update() {
    return ReactDOM.render(<App name={newName}/>, el)
  }
  return {
    update: update
  }
}

var newName = "new name";
var wrapper = Wrapper(newName, document.getElementById('root'));

$('#changeprop').on('click', function(){ wrapper.update(); });

单击按钮时，我重新渲染该组件，但是当我希望它显示“新名称”时，显示的名称仍然是“默认名称”

Answer 1

尽管不建议使用方法forceUpdate，但不建议将其用于组件实例。

您还可以定义一个有状态组件，并使用组件方法setState用不同的数据重新呈现您的组件

这里是stackblitz example

用javascript更新React组件

1 个答案: