Reactjs 基于父状态更新子组件_Reactjs_React Native

Reactjs 基于父状态更新子组件

reactjs react-native

Reactjs 基于父状态更新子组件,reactjs,react-native,Reactjs,React Native,我对反应还不熟悉，我很确定这是一个常见的问题，有一个通用的解决方案，但是，因为我对反应的概念还不熟悉，我不知道如何解决它以下面的示例为例，如何让我的孩子在调用TouchableWithoutFeedback回调时重新渲染？（不要告诉我使用不同的组件，这个想法可以应用到很多父子关系中——当某个父对象发生问题时，重新渲染子对象） {/*我在这里做什么*/} onPressOut={（）=>{/*我在这里做什么*/} > 一些文本必须编写自定义组件似乎有点冗长（因此每次需要此类功能时，我都可以调

我对反应还不熟悉，我很确定这是一个常见的问题，有一个通用的解决方案，但是，因为我对反应的概念还不熟悉，我不知道如何解决它

以下面的示例为例，如何让我的孩子在调用

TouchableWithoutFeedback

回调时重新渲染？（不要告诉我使用不同的组件，这个想法可以应用到很多父子关系中——当某个父对象发生问题时，重新渲染子对象）

{/*我在这里做什么*/}
onPressOut={（）=>{/*我在这里做什么*/}
>
一些文本

必须编写自定义组件似乎有点冗长（因此每次需要此类功能时，我都可以调用

setState（）

，真的必须吗？

作为一个粗略的示例，您将更新这些回调上的状态，并在render方法中将其作为道具传递给您的子组件

例如：

this.state = { isHighlighted: false }; // inside the parent component constructor

render() {
  const { isHighlighted } = this.state;

  return (
    <div>
      <FirstChild style={{ backgroundColor: isHighlighted ? 'black' : 'white' }}> 
        <SecondChild style={{ color: isHighlighted ? 'white' : 'black' }}>Some text</SecondChild>
      </FirstChild>
    </div>
  );
}

如果希望通过嵌套组件创建样式，则必须：

a）继续把它们当作道具传递

b）将您的状态保存在存储中（）

作为一个粗略的示例，您可以更新这些回调上的状态，并将其作为prop传递给render方法中的子组件

例如：

this.state = { isHighlighted: false }; // inside the parent component constructor

render() {
  const { isHighlighted } = this.state;

  return (
    <div>
      <FirstChild style={{ backgroundColor: isHighlighted ? 'black' : 'white' }}> 
        <SecondChild style={{ color: isHighlighted ? 'white' : 'black' }}>Some text</SecondChild>
      </FirstChild>
    </div>
  );
}

如果希望通过嵌套组件创建样式，则必须：

a）继续把它们当作道具传递

b）将您的状态保存在存储中（）

您的

onPressIn（）

和

onPressOut（）

方法应该更新组件的状态。当组件的状态更改时，将调用

render（）

方法并重新渲染组件。如果组件的子属性因“更新中”状态而更改，则它们也将重新渲染

在您的具体情况下，您应该执行以下操作：

向组件添加状态。在组件定义的某处添加

state={pressed:false}

使用onPress方法更新状态，并在设置组件子级的属性时使用该状态：

{this.setState（{pressed:true}}}
onPressOut={（）=>{this.setState（{pressed:false}}}
>
一些文本

以上内容在Android设备上的React Native 0.48中进行了测试。

您的

onPressIn（）

和

onPressOut（）