Question

我正在使用组件库，我无法解决这个问题。我是新手做出反应和javascript，需要帮助库中有一个组件，它使用标签呈现标题面板组件
| _Component.Tab

Tab组件有2种状态，可在单击时更改其外观。但是单击处理程序和状态更改必须由我在Tab组件之外定义。我该怎么做？

Answer 1

通过您的问题向我看来，您需要使用props来传递函数以将状态从Component更改为Tabs。像这样：

<强>组件

changeState(value) {
  this.setState({ appearance: value  });
}

render() {
  return (
    <div>
      <Tab
        appearance={this.state.appearance}
        onChangeState={this.changeState}
      />
    </div>
  );
}

标签

render() { console.log('Appearance: ', this.props.appearance); // Use it for whatever you need it return ( <div> <Button onClick={(value) => this.props.onChangeState(value)} /> </div> ); }

Answer 2

不确定为什么要处理函数，并且当它必须在Tab组件内时，它是在组件外部的状态。但是这里有一个解决方案，你在Tab组件中实际需要做的就是处理你的状态

将处理程序函数绑定在如下构造函数中例如：

this.handlerFunction = this.handlerFunction.bind（this）
在选项卡onClick上调用this.handlerFunction引用例如：

的onClick = {this.handlerFunction}
在handlerFunction中设置状态例如：

handlerFunction（事件）{ this.setState（{ tabClicked：event.target.value }） }

否则我猜外部组件应该是您正在谈论的子组件。如果这样通过你的标签点击状态作为道具到你的外部组件（即子组件）并在子组件中接收该状态作为道具并在那里做setState。

如果你还不清楚那么在此处发布您的组件代码。使用Just理论，理解你所谈论的实际问题并不困难。

调用render（）时访问组件的状态

2 个答案: