React Native：在 Navigator Pop 上更改组件（文本）

Posted 2023-03-12

【中文标题】React Native：在 Navigator Pop 上更改组件（文本）

【英文标题】：React Native: Change Component (Text) on Navigator Pop

【发布时间】：2016-04-03 02:03:50

【问题描述】：

我正在创建一个组件/视图，其中包含可供选择的内容列表，类似于表格视图。

当我在视图 A 中时，我可以通过导航器推送跳转到该表格视图。一旦选择了一个项目，我就会弹出一个。但是，我希望使用适当的值更新视图 A 中的文本组件。

我正在考虑传递对这个文本组件的引用，但听起来不对。还有其他方法可以实现吗？

我找不到可以在这两个平台上使用的任何表格视图，如果您有任何好的建议，请告诉我。

【参考方案1】：

实现这一点的 React 方法是将 callback 函数传递给命名属性，假设在本例中为 onSelect。

MyParentComponent extends Component 
    ...
    MySelectHandler(value) 
        this.setState(
            valueSelected: value
        );
    ,
    ...

创建您的选择器组件：

<MyCustomTableView onSelect=this.MySelectHandler/>

在你的组件中：

MyCustomTableView extends Component 
    ...
    onValueSelected(value) 
        this.props.onSelect(value);
    
    ...

考虑到您的“重新渲染”问题，React 仅更新根据先前状态更改的组件。由于您的输入可能不依赖于状态，因此它们不会得到更新，因为它们没有任何变化。

如果您想在 valueSelected 键状态更新时清除所有输入，您可以使用生命周期方法 componentDidUpdate()，并在每次值更新后手动清除您的输入。

// In MyParentComponent
componentDidUpdate(prevProps, prevState) 
    if (prevState.valueSelected !== this.state.valueSelected)
        this.refs.myInput.value = ''; // Do this for each input, you'll need to add a unique ref attribute for each one

...

【参考方案2】：

我通过将 this 作为道具传递给表格视图并在表格视图中调用 this.props.parent.setState(selection: selectedThing) 解决了这个问题。

我认为 setState 会重新渲染整个视图并摆脱任何用户输入，但它似乎只会重新渲染更改的组件