Question

我是非常新的反应和javascript所以如果我问这个错误我很抱歉。这是针对小组项目的，这意味着我很可能不了解项目100％

年长的兄弟有一个我想要使用的好道具：

```

export default class OlderSibling extends Component {
  state = {
    currentCity: city //(that was gathered from a bunch of other steps)
  };

  render() {
     return(
      )
  }
}

```

父文件没有此道具，但它确实有自己的东西。我不关心这些其他的道具。

```

class Parent extends Component {
   constructor(props) {
     super(props)
     this.state = {
          flower: 'red'
     }
    }

 render() {
    return (
         <OlderSibling/>
         <YoungerSibling/>
    )
  }
}

```

年轻的兄弟（想要当前城市的人）有一堆this.state属性，我不想与他人分享，但只是想要更老的兄弟的东西（我想是什么样的）年幼的兄弟姐妹通常会这样做。

```

   export class YoungerSibling extends Component {
     constructor(props) {
        super(props);
        this.state = {
              title: '',
              description: []
         }
     }

    render() {
          return(

           )
     }
}

```

为了防止我不清楚，年轻的兄弟姐妹只想要年长的兄弟姐妹。这个状态：当前城市老兄弟兄弟辛辛苦苦聚集。

我知道我没有完全放置代码，但如果你想批评它，请做！我还在学习，欢迎大家的反馈！

我想方设法做到这一点，但他们都是关于将父母转移给孩子而不是我想要的。我还读到有Redux可以处理这个？我不知道我的同学们是否对此感兴趣。

感谢您抽出宝贵时间阅读本文！

编辑：

[已解决]

我只想编辑并感谢@soupette，@ Liam，@ [Denys Kotsur]和@Tomasz帮助我理解更多的反应。我意识到这篇文章非常像一个勺子喂食请求，你们都帮助了。谢谢！

此外，如果有其他人遇到此问题，请不要忘记将其作为this.props.currentCity在Younger Sibling上调用。

Answer 1

您可以执行以下操作：

ViewContext

然后在您的OlderSibling中，您可以使用函数更新父状态：

class Parent extends Component {
  state = {
     flower: 'red'
     currentCity: '',
   };

   updateCurrentCity = (currentCity) => this.setState({ currentCity });

   render() {
     return (
       <OlderSibling updateCurrentCity={this.updateCurrentCity} />
       <YoungerSibling city={this.state.currentCity} />
     );
   }
}

Answer 2

您应该为这两个组件创建let inner = await GetProperty(ele, 'innerHTML');组件并保持状态。

此外，您应该将其作为Parent传递给两个孩子（YoungerSibling和OlderSibling）并为prop添加反向数据流，以便在城市更改时OlderSibling然后OlderSibling应该知道这一点。

例如：

<强> Parent.jsx

ParentSibling

<强> OlderSibling.jsx

  class Parent extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        currentCity: ''
      }
    }

    currentCityChangeHandler = city => {
      this.setState({currentCity: city});
    };

    render() {
      const { currentCity } = this.state;

      return(
        ...
        <OlderSibling 
            currentCity={currentCity}  
            onCurrentCityChange={this.currentCityChangeHandler} 
        />
        <YoungerSibling currentCity={currentCity} />
        ...
      )
    }
  }

因此，在这种情况下，它允许您在两种情况下都使用此参数，并且会不断更新。

此外，您应该在class OlderSibling extends React.Component { ... // Somewhere when new city is coming from // You should pass it into the callback newCityComingFunction() { const city = 'New York'; // Pass the new value of city into common `Parent` component this.props.onCurrentCityChange(city); } ... }中使用this.props.currentCity，而不是在此组件中使用OlderSibling，因为它的值已移至this.state.currentCity的组件状态。

希望它会有所帮助。

Answer 3

正如之前的回答建议提升状态我也更喜欢使用它

这是一个例子

Answer 4

你有两个选择。

使用外部状态管理库，如redux。
lift the state up - 这意味着Parent组件将在该状态中保留currentCity。

使用contex API可能有第三种选择，但我不确定如何在此处执行此操作。

React.js将支持状态从兄弟姐妹转移到另一个兄弟姐妹？

4 个答案: