如何解决如何解决使用 this.refs 已被弃用? 第一个解决方案第二种解决方案简化代码
我知道 this.refs 已被弃用,可以使用 React.createRef 更改它,但在我的情况下是不同的
这是我们的代码
export default class ScrollableTabString extends Component {
static ITEM_PADDING = 15;
static defaultProps = {
tabs: [],themeColor: '#ff8800',};
static propTypes = {
tabs: PropTypes.any,themeColor: PropTypes.string,};
shouldComponentUpdate(nextProps,nextState) {
if (nextProps.tabs !== this.props.tabs || this.state !== nextState) {
return true;
}
return false;
}
constructor(props) {
super(props);
this.views = [];
this.state = {};
this.scrollableTabRef = React.createRef();
}
componentDidMount() {
setTimeout(() => {
this.select(this.props.defaultSelectTab ? this.props.defaultSelectTab : 0);
},300);
}
select(i,code) {
let key = 'tab ' + i;
for (let view of this.views) {
if (view) {
let isSelected = false;
if (view.key === key) {
isSelected = true;
}
// This refs is Object with many ref views
if (this.refs[view.key]) {
this.refs[view.key].select(isSelected);
}
this.scrollableTabRef.current.goToIndex(i);
}
}
if (this.props.onSelected) {
this.props.onSelected(code);
}
}
render() {
this.views = [];
if (this.props.tabs) {
let tabs = this.props.tabs;
for (let i = 0; i < tabs.length; i++) {
if (tabs[i]) {
let key = 'tab ' + i;
let view = (
<TabItem
column={tabs.length}
themeColor={this.props.themeColor}
useTabVersion2={this.props.useTabVersion2}
isFirstItem={i === 0}
isLastItem={i === tabs.length - 1}
ref={key}
key={key}
tabName={tabs[i].name}
onPress={() => {
this.select(i,tabs[i].code);
}}
/>
);
this.views.push(view);
}
}
}
let stypeTab = this.props.useTabVersion2
? null
: { borderBottomWidth: 0.5,borderColor: '#8F8E94' };
return (
<ScrollableTab
ref={this.scrollableTabRef}
style={Platform.OS === 'ios' ? stypeTab : null}
contentContainerStyle={Platform.OS === 'android' ? stypeTab : null}
>
{this.views}
</ScrollableTab>
);
}
}
我想修复 eslint 的警告,但在我们的例子中,我不能使用 React.createRef
解决方法
第一个解决方案
如果你的代码运行良好,只是想抑制 eslint 警告,
请将这一行放在文件的第一行:(我相信你的 eslint 警告应该是 react/no-string-refs)
/* eslint react/no-string-refs: 0 */
第二种解决方案
如果你的情况是你不能使用 createRef()
,那么试着像这样实现:
<ScrollableTab ref={(tab) => this.scrollableTab = tab} ...
然后这样调用:
this.scrollableTab?.goToIndex(index);
简化代码
阅读您的示例代码后,我建议您使用 state 而不是 string refs。
此外,由于您的示例中有很多冗余代码,我已尝试对其进行简化。
import React,{ Component } from 'react';
import { Platform } from 'react-native';
import PropTypes from 'prop-types';
class ScrollableTabString extends Component {
static ITEM_PADDING = 15;
state = { activeTab: null }; scrollableTab;
stypeTab = (!this.props.useTabVersion2 ? { borderBottomWidth: 0.5,borderColor: '#8F8E94' } : null);
shouldComponentUpdate(nextProps,nextState) {
return (nextProps.tabs !== this.props.tabs || this.state !== nextState);
}
componentDidMount() {
this.setState({ activeTab: this.props.defaultSelectTab || 0 });
}
/* If your second param - code is optional,add default value */
select = (index,code = null) => {
let key = `tab ${index}`;
/* Set activeTab state instead of calling function in every views */
this.setState({ activeTab: key });
this.scrollableTab?.goToIndex(index);
/* Not sure what are you archiving,but why don't you use component state and pass the isSelected into item */
/*for (let view of this.views) {
if (view) {}
}*/
this.props.onSelected && this.props.onSelected(code);
}
renderTabs = () => {
const { tabs,themeColor,useTabVersion2 } = this.props;
return tabs?.map((tab,index) => {
if (!tab) { return null; }
return (
<TabItem
key={`tab ${index}`}
column={tabs.length}
themeColor={themeColor}
useTabVersion2={useTabVersion2}
isFirstItem={index === 0}
isLastItem={index === (tabs.length - 1)}
tabName={tab.name}
onPress={() => this.select(index,tab.code)}
isSelected={this.state.activeTab === `tab ${index}`}
/>
);
});
};
render() {
return (
<ScrollableTab
ref={(tab) => this.scrollableTab = tab}
style={Platform.OS === 'ios' ? stypeTab : null}
contentContainerStyle={Platform.OS === 'android' ? stypeTab : null}
>
{this.renderTabs()}
</ScrollableTab>
);
}
}
ScrollableTabString.defaultProps = {
onSelected: null,/* Miss this props */
tabs: [],themeColor: '#ff8800',useTabVersion2: false /* Miss this props */
};
ScrollableTabString.propTypes = {
onSelected: PropTypes.func,/* Miss this props */
tabs: PropTypes.any,themeColor: PropTypes.string,useTabVersion2: PropTypes.bool /* Miss this props */
};
export default ScrollableTabString;
更新 (18-02-2021)
将 select()
与 TabItem 一起使用可能会导致几个问题:
- 性能问题(当用户按下一个 TabItem 时,
select()
将被调用与 TabItem 数量一样多的次数,以改变内部的每个状态) - 糟糕的编码风格和维护成本,因为有太多重复的状态和引用
我强烈建议在父组件中设置状态并将其作为道具传递给子组件。为了清楚地解释它是如何工作的,这里有一个最简单的示例:
ScrollableTabString.js
class ScrollableTabString extends Component {
state = { activeTab: null };
selectTab = (tabName) => { this.setState({ activeTab: tabName }); };
renderTabs = () => this.props.tabs?.map((tab,index) => (
<TabItem key={`tab ${index`} tabName={tab.name} onPress={this.selectTab} activeTab={this.state.activeTab} />
));
}
TabItem.js
class TabItem extends Component {
/* Use this function on Touchable component for user to press */
onTabPress = () => this.props.onPress(this.props.tabName);
render() {
const { activeTab,tabName } = this.props;
const isThisTabActive = (activeTab === tabName);
/* Use any props and functions you have to achieve UI,the UI will change according to parent state */
return (
<TouchableOpacity onPress={this.onTabPress} style={isThisTabActive ? styles.activeTab : styles.normalTab}>
<Text>{tabName}</Text>
</TouchableOpacity>
);
}
}
如果您确实需要在 TabItem
中更改某些状态,请尝试在其中使用 componentDidUpdate()
,但它也应该是一个冗余代码:
componentDidUpdate(prevProps) {
if (this.props.activeTab !== prevProps.activeTab) {
// change your state here
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。