Question

我可以在App.js中使用子组件状态吗？我的意思是，在子组件中，我有一个变量，例如i = 5，我想在App.js中使用它。在App.js中，this.state.i显示为0。

Answer 1

这是React的一个非常基本的模式，因此也许只需阅读官方文档oder即可做一些有关React入门的教程。

但是要帮助您解决此问题，您需要将一个传递给孩子的函数传递给<App/>

是这样的：

应用程序：


    this.state { i : 0 }

    updateState() {
        this.setState(i: i + 1); // or whatever
    }

    render() {
        return (
            <>
                 <Child updateState={this.updateState} />
            </>
    ....

孩子：

<div onClick={props.updateState}>Click me</div>

Answer 2

在app.js上执行此操作；

#SettingsOverlay {
  display: none;
  position: fixed;
  z-index: 3;
  width: 100%;
  height: 100%;
  background-color: rgba(48, 48, 48, 0.7);
  background-size: cover;
}

#Options {
  display: flex;
  flex-direction: column;
}

.option {
  display: flex;
  flex-direction: row;
}

.option h2 {
  display: inline-block;
  width: 50%;
}

.option select {
  display: inline-block;
  width: 50%;
}

.settingsOverlay {
  width: 80%;
  height: 80%;
  background-color: purple;
  margin: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

对您的孩子执行以下操作：

<div id='SettingsOverlay'>
  <div class="settingsOverlay">
    <h1>Settings</h1>
    <div id='Options'>
      <div class='option'>
        <h2>Timezone</h2>
        <select>
          <option value="GMT-12">GMT-12</option>
          <option value="GMT-11">GMT-11</option>
          <option value="GMT-10">GMT-10</option>
          <option value="GMT-9">GMT-9</option>
          <option value="GMT-8">GMT-8</option>
          <option value="GMT-7">GMT-7</option>
          <option value="GMT-6">GMT-6</option>
          <option value="GMT-5">GMT-5</option>
          <option value="GMT-4">GMT-4</option>
          <option value="GMT-3">GMT-3</option>
          <option value="GMT-2">GMT-2</option>
          <option value="GMT-1">GMT-1</option>
          <option value="GMT">GMT</option>
          <option value="GMT+1">GMT+1</option>
          <option value="GMT+2">GMT+2</option>
          <option value="GMT+3">GMT+3</option>
          <option value="GMT+4">GMT+4</option>
          <option value="GMT+5">GMT+5</option>
          <option value="GMT+6">GMT+6</option>
          <option value="GMT+7">GMT+7</option>
          <option value="GMT+8">GMT+8</option>
          <option value="GMT+9">GMT+9</option>
          <option value="GMT+10">GMT+10</option>
          <option value="GMT+11">GMT+11</option>
          <option value="GMT+12">GMT+12</option>
        </select>
      </div>
    </div>
  </div>
</div>

在React Native中使用状态和道具

2 个答案: