Question

我有一个Message组件，在 text / babel 脚本中显示一些文本。然后我在其脚本中包含我的旧javascript代码（ javascript ）。

从＆＃34;旧javascript＆＃34;更新Message组件文本值的最佳做法是什么？码？

<script src="js/libs/react.js"></script>
<script src="js/libs/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

<script type="text/babel">

class Message extends React.Component {
    constructor(props) {
      super(props);
      this.state = {text: "Default text"};
    }

    render() {
      return (
          <p>{this.state.text}</p>
        )
    }
  }; // class

ReactDOM.render(
     <Message />,
    document.getElementById('reactRoot')

</script>

现在是javascript代码

<script>
// think here we are for example inside async code 
// how should I update the text of Message from here?
message.update("new text") // ??? 
</script>

我是如何参考创建的消息组件？

Answer 1

你可以使用这样的肮脏技巧：

class Message extends React.Component {
    constructor(props) {
      super(props);
      this.state = {text: "Default text"};
      window.setMessageText = function(txt){
      this.setState({text:txt})
      }.bind(this)
    }

并像window.setMessageText("newMessage")

一样使用它

，或者您可以设置一个事件系统（我建议这是一个好习惯），在组件构造函数中订阅您的事件并在旧/遗留代码中发布事件

这是一个方便的图书馆：https://github.com/Olical/EventEmitter

Reactjs：粘合React代码一起旧的javascript代码

1 个答案: