Question

我有一个反应本机项目，我想在单击按钮时渲染组件。.按钮显示为底部栏，其中每个按钮都应渲染组件。

我试图这样设置状态：

constructor(props){
    super(props);
    this.state = { selectedPage : '' }
}

在我的按钮中，我尝试将每个按钮的状态设置为一个值：

<TouchableOpacity onPress={ () => this.setState({ selectedPage : 'completed }), this._handleCaseView() }> Completed </TouchableOpacity>

然后，我尝试将render()方法中定义的变量的值更改为导入组件let caseView = <PendingCases />的默认值

我的_handleCaseView（）

_handleCaseView = () => {
    switch (this.state.selectedPage) {
      case "completed":
        this.caseView = <Text> Completed </Text>;
        break;
      case "delayed":
        this.caseView = <Text> Delayed </Text>;
        break;
      case "all":
        this.caseView = <PendingCases />;
        break;
      case "approved":
        this.caseView = <Text> Approved </Text>;
        break;
      case "set-by-doctor":
        this.caseView = <Text> SET BY DOCTOR </Text>;
        break;
      default:
        this.caseView = <PendingCases />;
    }
  }

然后在我的渲染方法<View> { this.caseView } </View>

中

问题在于未设置值，是否有更简单的方法？

-更新-

这是我的render()函数

return (

      <DrawerLayoutAndroid
        drawerWidth={200}
        drawerPosition={DrawerLayoutAndroid.positions.Right}
        renderNavigationView={() => navigationView}
      >

          <View style={{ flex : 1, flexDirection: 'column', backgroundColor: 'rgb(250, 250, 250)' }}>

          <HeaderWText header="Cases" />

          <View style={ styles.pageBody }>

          <View> { this.renderCaseView(this.state.selectedPage) } </View>

          </View>

        </View>

        <View style={{ height: 70, position: 'absolute', bottom: 0, left: 0, right: 0, borderTopColor: 'rgba(0, 0, 0, .2)', borderTopWidth: 1, flex: 1, flexDirection: 'row'}}>
          <TouchableOpacity onPress={ () => this.setState({ selectedPage : "completed" }) } style={{ flex : 1, padding: 5 }}>
            <View style={{ flex : 1, alignItems: 'center'}}>
            <Image style={{ width : 35, height: 35}} source={require('./images/completed.png')} />
            <Text style={{ textAlign: 'center', fontSize: 12}}>Completed</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={ () => this.setState({ selectedPage : "delayed"}) } style={{ flex : 1, padding: 5 }}>
            <View style={{ flex : 1, alignItems: 'center'}}>
            <Image style={{ width : 35, height: 35}} source={require('./images/delayed.png')} />
            <Text style={{ textAlign: 'center', fontSize: 12}}>Delayed</Text>
            </View>
          </TouchableOpacity>
        </View>

      </DrawerLayoutAndroid>

    )

我的constructor()和renderCaseView()

    constructor(props) {
    super(props);
    this.state = { selectedPage : 'completed' }
  }

  renderCaseView = (param) => {
    switch (param) {
      case "completed":
        return <PendingCases />;
        break;
      case "delayed":
        return <Text> Delayed </Text>;
        break;
      case "all":
        return <PendingCases />;
        break;
      case "approved":
        return <Text> Approved </Text>;
        break;
      case "set-by-doctor":
        return <Text> SET BY DOCTOR </Text>;
        break;
    }
  }

Answer 1

您需要包装onPress事件以返回single function，现在您要向其返回multiple functions。

onPress={ () => {
  this.setState({ selectedPage : 'completed' }); // Your Updater function
  this._handleCaseView()
}

要注意的另一件事是，因为handleCaseView依赖于state，并且您将其称为async，因此，一旦状态完成更新，就需要调用它在setState 回调参数中。

onPress={ () => {
      this.setState({ selectedPage : 'completed' }, () => this.handleCaseView());
}

Answer 2

有几种方法，您可以使用以下逻辑扩展render方法：

{
    "field1": "res1",
    "field2": "res2",
    "field3": null
}

您可以将render() { const ChoosenView = this.state.selectedPage ? <Completed /> : <Delayed /> // or more complicated vanilla js logic // call parametrized method, etc // to prepare 'visual parts' return ( <Layout> {ChoosenView} </Layout> ) }重构为

_handleCaseView

并直接在渲染中使用

renderCaseView = (param) => {
    // you can use Map/object definitions instead of switch
    switch (param) {
      case "completed":
        return <Text> Completed </Text>;
      case "delayed":
        return <Text> Delayed </Text>;
      case "all":
        return <PendingCases />;
      case "approved":
        return <Text> Approved </Text>;
      case "set-by-doctor":
        return <Text> SET BY DOCTOR </Text>;
      default:
        return <PendingCases />;
    }
}

反应本地，在按钮上单击加载组件

2 个答案: