什么是 react 的 refs 为什么它们很重要

2025-05-08 00:01:26
推荐回答(1个)
回答1:

react refs 可以接受一个字符串对象吗处理 React 组件之间的交流方式,主要取决于组件之间的关系,然而这些关系的约定人就是你。

我不会讲太多关于 data-stores、data-adapters 或者 data-helpers 之类的话题。我下面只专注于 React 组件本身的交流方式的讲解。

React 组件之间交流的方式,可以分为以下 3 种:

【父组件】向【子组件】传值;

【子组件】向【父组件】传值;

没有任何嵌套关系的组件之间传值(PS:比如:兄弟组件之间传值)

一、【父组件】向【子组件】传值

初步使用

这个是相当容易的,在使用 React 开发的过程中经常会使用到,主要是利用 props 来进行交流。例子如下:
// 父组件
var MyContainer = React.createClass({
getInitialState: function () {
return {
checked: true
};
},
render: function() {
return (

);
}
});

// 子组件
var ToggleButton = React.createClass({
render: function () {
// 从【父组件】获取的值
var checked = this.props.checked,
text = this.props.text;

return (

);
}
});

进一步讨论

如果组件嵌套层次太深,那么从外到内组件的交流成本就变得很高,通过 props 传递值的优势就不那么明显了。(PS:所以我建议尽可能的减少组件的层次,就像写 HTML 一样,简单清晰的结构更惹人爱)
// 父组件
var MyContainer = React.createClass({
render: function() {
return (

);
}
});