赵走x博客 - 开发者的网上家园

10、从外部访问组件

资源编号:76058 书籍 React快速上手开发热度：97

React 的设计允许它和其他任何已存在的代码共存。

在实际中，你不会总是从零开始构建一个React 应用。有时候，你可能需要将一个现有的应用或网站逐步迁移到React。幸运的是，React 的设计允许它和其他任何已存在的代码共存。毕竟，React 的原作者也并没有从头完全用React 对一整个超大型应用（Facebook）进行重构。

让你的React 应用和外界进行通信的一种方法，是在使用ReactDOM.render() 方法进行渲染时，把引用赋值给一个变量，然后在外部通过该变量访问组件：

```
var myTextAreaCounter=ReactDOM.render(
        React.createElement(TextAreaCounter,{text:'Bob'}),
        document.getElementById("app")
    );
```

现在你可以通过myTextAreaCounter 访问组件的方法和属性，就像在组件内部使用this 访问一样。你甚至可以在JavaScript 控制台中操控这个组件（如图2-9 所示）。

![bs64](https://img.handsomemark.com/2019/11/09/19eba5a4-02a9-11ea-9068-0242ac140002.png)
图2-9：通过引用访问已渲染的组件

以下这行代码设置了新的state 值：
```
myTextAreaCounter.setState({text: "Hello outside world!"});
```
以下这行代码获取了React 创建的父元素DOM 节点的引用：
```
var reactAppNode = ReactDOM.findDOMNode(myTextAreaCounter);
```
获取DOM 结构中首个`<div id="app"> `节点。这也是你让React 进行渲染的位置：
```
reactAppNode.parentNode === document.getElementById('app'); // true
```
通过以下方法可以访问组件的属性和状态：
```
myTextAreaCounter.props; // Object { defaultValue: "Bob"}
myTextAreaCounter.state; // Object { text: "Hello outside world!"}
```
现在你已经有权限从组件外部访问整个组件的API。尽管如此，你还是应当谨慎使用这种超能力。也许当你需要获取节点的尺寸并确保其适配整个页面时，可以使用ReactDOM.findDOMNode()，但这种情况确实出现得不多。即便你认为这样可以方便地修改那些不属于你的组件的state，可这样做违背了React 的初衷。假若组件并不能预料到外部的这些干扰，可能还会导致bug的产生。比如以下的代码虽然可以生效，但不推荐你这样做：
```
// 反例
myTextAreaCounter.setState({text: 'NOOOO'});
```