将本机引用响应到呈现的类

Question

我正在尝试创建一个简单的应用程序：按下按钮并将项目添加到列表中。

这是一次尝试：

export default class App extends Component<Props> {
constructor(props) {
super(props);
this.myRef = React.createRef();
} 
onPressButton = () => {
this.myRef.setState({data: [this.myRef.state.data, {key: 'test'} ]});
}

render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<MsgList  ref={(comp) => {this.myRef = comp;}}/>
<TouchableOpacity onPress={this.onPressButton}>
<Text>press</Text>
</TouchableOpacity> 
</View>
);
}
}

消息列表

class MsgList extends Component {
render() {
return (
<View style={styles.container}>
<FlatList
data={[
{key: 'Devin'},
{key: 'Jackson'},
{key: 'James'},
]}
renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
/>
</View>
);
}
}      

这。Ref 是一个大的圆形结构，但不是节点，所以 引用错误

我尝试了ReactDOM.findDOMNode，但收到错误 从 'react-dom' 导入 ReactDOM 导入错误

我已经尝试了很多迭代。 我最好的猜测是有一种更好的方法来呈现MsgList。

Answer 1

根据输入，我提升了状态

export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
data: [{key: 'Devin'},
{key: 'Jackson'},
{key: 'James'},]
}
}

onPressButton = () => {
this.setState({data: this.state.data.concat( {key: 'test'} )});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<MsgList data={this.state.data}  />
<TouchableOpacity onPress={this.onPressButton}>
<Text>press</Text>
</TouchableOpacity> 
</View>
);
}
}
class MsgList extends Component {
render() {
return (
<View style={styles.container}>
<FlatList
data={this.props.data}
renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
/>
</View>
);
}
}

Answer 2

推荐解决方案

使用父组件中的state处理子props而不ref。

应用.js

export default class App extends Component<Props> {
constructor(props) {
super(props);
} 
onPressButton = () => {
this.setState((prevState, props) => ({ // Use setState for changing 
data: prevState.data.concat({key: 'test'}),
});
}
render() {
return (
<View style={styles.container}>
<MsgList  data={this.state.data} />
<TouchableOpacity onPress={this.onPressButton}>
<Text>press</Text>
</TouchableOpacity> 
</View>
);
}
}

另一种解决方案

setNativeProps可以是您想要的方式。

应用.js

onPressButton = () => {
this.myRef.setNativeProps({ // Change ref's props directly
data: {key: 'test'}
});
},

消息列表类

class MsgList extends Component {
render() {
return (
<View style={styles.container}>
<FlatList
data={this.props.data} // Get data from props. 
renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
/>
</View>
);
}
}    

但这可能是性能瓶颈。

当频繁的重新渲染造成性能瓶颈时使用 setNativeProps

直接操作不会是你经常使用的工具;你通常只使用它来创建连续的动画，以避免渲染组件层次结构和协调许多视图的开销。 setNativeProps 是命令式的，它将状态存储在本机层(DOM、UIView 等(中，而不是存储在 React 组件中，这使得你的代码更难推理。在使用它之前，请尝试使用 setState 和 shouldComponentUpdate 解决您的问题。

官方

为什么？

state应由组件自身管理。这就是为什么您之前尝试过this.ref.state为空的原因。因此，如果值是动态的，您可以通过setState将道具从父级传输到子级。state更新可能是异步的。这就是为什么我在setState中使用prevState.医生