在 React 中按下按钮时重新渲染道具数据

Posted 2023-02-22

【中文标题】在 React 中按下按钮时重新渲染道具数据

【英文标题】：Re-rendering prop data on button press in React

【发布时间】：2017-12-20 02:31:42

【问题描述】：

更新 #2：我在 JSFiddle 上发布了 LinksScreen 和 TimelineDay 的代码。抱歉，我之前没有这样做！

更新：我使用 .我现在正在尝试更新timelineData，组件TimelineDay 中的一个道具并重新渲染LinksScreen 类。但是，在我的测试中没有任何反应。我对状态/道具非常陌生，因此非常感谢任何建议。

对 React/JS 非常陌生（新手提醒）。让我们进入我的问题的关键部分..

LinksScreen 类包含带有道具和外部组件的 flexbox 视图

import TimelineDay from '../components/TimelineDay.js';

export default class LinksScreen extends React.Component 
constructor() 
    super();

    this.onPress1 = this.onPress1.bind(this);
    this.onPress2 = this.onPress2.bind(this);
    this.onPress3 = this.onPress3.bind(this);

    this.state = 
        dayOne: [ . . ],
        dayTwo: [. . ],
        dayThree: [. . ],
    

标题中的按钮具有自定义 onPressX 函数，可使用相应的 dayOne、dayTwo 或 dayThree 数据更新 timelineData 属性。

render() 
    return (
        <View style=styles.container>
        <View style=styles.dayBar>
            <TouchableHighlight onPress=this.onPress1>
                <View>
                    <MaterialCommunityIcons name="numeric-1-box-outline" size=34 color="#FFD344"/>
                     <Text style=styles.day1Text>Fri, 29th</Text>
                </View>
            </TouchableHighlight>
           </View>

这些是相应的按钮功能，用适当的数组重新分配子道具timelineData

onPress1 = () => 
    this.setState(timelineData: this.state.dayOne)
;
onPress2 = () => 
    this.setState(timelineData: this.state.dayTwo)
;
onPress3 = () => 
    this.setState(timelineData: this.state.dayThree)
;

我猜，通过调用 setState()，也会调用重新渲染。然而，这是我在测试中难以观察到的。

这是包含TimelineDay 组件和timelineData 道具的方法，我希望在单击按钮和重​​新分配道具时重新渲染它们。

<View style=styles.eventScheduleView>
     <TimelineDay ref=(timelineData) => 
         timelineData = this.state.timelineData>
     </TimelineDay>
</View>

这可能是一个非常有用的问题，但我（和我大学的黑客马拉松领导团队）需要额外的说明。

随意丢弃任何有用的资源（通量、状态等）。谢谢！

【问题讨论】：

您能否发布两个组件的完整代码，整齐地标记，以便每个人都知道他们在看什么？否则我们是在猜测。另外，不知道为什么要使用 refs。如果您重新格式化代码，我可以提供更多帮助。无需将组件分解为不同的代码部分，只需发布​​两个 sn-ps，父组件（LinkScreens）和子组件（TimelineDay）。

如果你是 React 的新手，如果你尝试使用像 Redux 这样的东西，你的思想也会像汤一样被蒸发掉。

对不起！看看我最近的更新。我为每个 @daniel-zuzevich 链接了 JSFiddles

【参考方案1】：

这里有一些你正在做的事情有点奇怪。我冒昧地猜测您的 whataday2 按钮有效。

<TouchableHighlight onPress=whatDay: "dayOne">

和

<TouchableHighlight onPress=whatDay: "dayThree">

除了将一个具有“whatDay”属性的对象放入 onPress 之外，什么都不做。但是，此按钮传递您创建的实际功能，这是正确的方法。

<TouchableHighlight onPress=this.onPress>

另外，不需要在 onPress 函数中返回 setState，这些可触摸对象中的每一个都只是执行 onPress 按钮调用的内容。如果你。有两种方法可以正确地做到这一点，第一种是为每个“whatday”调用创建单个 onPress 调用，就像这样。

onPressTwo = () => 
  this.setState(
     whatDay: "dayTwo"
  );
;

onPressThree = () => 
  this.setState(
     whatDay: "dayThree"
  );
;
....

并将每一个传递给它们各自的按钮。或者，您可以在每个按钮中绑定 onPress，并使 onPress 接受一个变量。

onPress = (day) => 
  this.setState(
     whatDay: day
  );
;

像这样绑定它。

<TouchableHighlight onPress=this.onPress.bind(this, "dayThree">

您至少应该考虑应用 Flux 或 Redux 模式，Flux 更容易处理小事情。使用其中一种模式将允许将所有状态存储在与组件无关的位置，从而更易于管理。

【讨论】：

在减少逻辑之后，我建立了三个独立的onPress动作：this.onPress1 = this.onPress1.bind(this); this.onPress2 = this.onPress2.bind(this); this.onPress3 = this.onPress3.bind(this);每个“onPress”函数都会尝试使用适当的数组（在父 this.state 中定义）设置 TimelinetimelineData 子属性： this.state = dayTwo: [ ..], dayThree: [ .. ], 然后设置timelineData prop: onPress1 = () => this.setState(timelineData: this.state.dayOne)

抱歉没有格式化的评论，还在习惯 ***。我编辑了我的原始帖子以包含您的架构建议。如果你有时间，我很乐意让你审查它。谢谢！

您将timelineData 传递给ref，该属性的目的只是引用该组件，而不是传递数据。设置状态确实会导致重新渲染，但如果数据没有放在可见的地方，什么都不会改变。将您的数据放在“this”而不是状态上也是一个更好的选择，并且只更新状态。状态应该保留给只导致可见变化的东西。通常，flux 或 redux 可以解决这个问题。

【参考方案2】：

this.state= 
    whatDay: props.string
;

你想在这里为你的组件设置初始状态，不确定你打算用 props.string 做什么，你可以把它设置为一个空字符串。

“Testing action onPress to update prop...”，其实你是在尝试更新 state，props 无法使用 setState 更新。

花一点时间复习 React 基础知识会对你有所帮助。