您好,我在重新渲染下面的组件时遇到问题,您可以在第一个屏幕上看到我的代码,因为我有一个自定义组件:
class Ahelle extends React.Component{
constructor(props){
super(props)
this.state={
mamad:10
}
}
render(){
return (
<View style={{backgroundColor:"white"}}>
<ScrollView>
<CustomSlider defaultValue={0} />
<CustomSlider defaultValue={this.state.mamad} disabled={true}/>
<TouchableOpacity style={{width:100,height:100,alignSelf:"center"}} onPress={()=>{this.setState({mamad:20})}}><Text>dddd</Text></TouchableOpacity>
</ScrollView>
</View>
);
}
}
这里我有一个自定义组件,我传递了一个默认值来显示,但是当我改变状态时,它并没有改变我作为道具传递的值。 这是我的自定义滑块组件及其状态,道具和其他详细信息。
class Test extends React.Component{
constructor(props){
console.log(props)
super(props)
this.state = {
value: props.defaultValue
};
}
render(){
return(
<Slider
style={{width: wp("70%")}}
value={this.state.value}
/>
)
}
}
export default Test;
SEE THE PROBLEM IN ACTION 谢谢您的时间
答案 0 :(得分:1)
您的滑块组件永远不会对传递的更新道具值执行任何操作。巧合的是,它也是一种反模式,用于将传递的道具存储在本地组件状态中。您可以并且应该直接食用它们。只需将this.state.mamad
传递给value
道具并食用即可。您还可以通过将其他道具散布到滑块组件中来传递它们。
class Test extends React.Component {
render() {
return (
<Slider
style={{ width: wp("70%") }}
value={this.props.value}
{...this.props}
/>
);
}
}
export default Test;
用法
<CustomSlider value={this.state.mamad} disabled={true} />
如果您真的想存储传递的defaultValue
道具并保持其更新,那么请实现componentDidUpdate
生命周期功能。请注意,这是 不是 推荐的解决方案。
class Test extends React.Component {
constructor(props) {
console.log(props);
super(props);
this.state = {
value: props.defaultValue
};
}
componentDidUpdate(prevProps) {
const { defaultValue } = this.props;
if (prevProps.defaultValue !== defaultValue) {
this.setState({ value: defaultValue});
}
}
render() {
return <Slider style={{ width: wp("70%") }} value={this.state.value} />;
}
}
export default Test;
答案 1 :(得分:-1)
您的代码正确。我测试过了。
App.js
import React from "react";
import { Text, View, ScrollView, TouchableOpacity } from "react-native";
import CustomSlider from "./CustomSlider";
export default class Ahelle extends React.Component {
constructor(props) {
super(props);
this.state = {
mamad: 10,
};
}
render() {
return (
<View style={{ backgroundColor: "white" }}>
<ScrollView>
<CustomSlider defaultValue={0} />
<CustomSlider defaultValue={this.state.mamad} disabled={true} />
<TouchableOpacity
style={{ width: 100, height: 100, alignSelf: "center" }}
onPress={() => {
this.setState({ mamad: 20 });
}}
>
<Text>dddd</Text>
</TouchableOpacity>
</ScrollView>
</View>
);
}
}
CustomSlider.js
import React from "react";
import { Text } from "react-native";
export default class CustomSlider extends React.Component {
render() {
return <Text>defaultValue: {this.props.defaultValue}</Text>;
}
}
结果: View Result