React.js 将 prop 状态从同级转移到另一个同级？

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(

           )
     }
}

```

以防万一我不清楚，弟弟妹妹只想要哥哥姐姐的 this.state: currentCity 哥哥姐姐辛辛苦苦收集的。

我知道我没有把代码放完整，但如果你想批评它，请尽管批评吧！我还在学习，欢迎大家的反馈！

我查找了执行此操作的方法，但它们都是关于 t运行将父子传递给子，这不是我想要的。我还读到有 Redux 可以处理这个问题？？不知道小伙伴们有没有兴趣

感谢您花时间阅读本文！

编辑：

[已解决]

我只想编辑并感谢@soupette、@Liam、@[Denys Kotsur] 和@Tomasz 帮助我更多地理解 React。我意识到这个 post 非常像是一个勺子喂食请求，你们都帮忙了。谢谢！

此外，以防万一其他人运行遇到这个问题，不要忘记将它称为 Younger Sibling as this.props.currentCity .

Answer 1

你有两个选择。

使用像 redux 这样的外部状态管理库。
lift the state up - 这意味着 Parent 组件将保持 currentCity 状态。

可能有使用 contex API 的第三种选择，但我不确定如何在这里使用。

Answer 2

您可以这样做：

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

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

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

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

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

  componentDidUpdate(prevProps, prevState) {
    if (prevState.currentCity !== this.state.currentCity) {
      this.props.updateCurrentCity(this.state.currentCity);
    }
  }

  render() {
    return(
    );
  }
}

Answer 3

您应该为这两个组件创建 Parent 组件并在那里保持状态。

此外，您应该将其作为 prop 传递给两个 children（YoungerSibling 和 OlderSibling），并为 OlderSibling 添加反向数据流，以便当 OlderSibling 中的城市发生变化时，ParentSibling 应该知道这一点。

例如：

Parent.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} />
        ...
      )
    }
  }

OlderSibling.jsx

  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);
    }

    ...
  }

所以在这种情况下，它将允许您在两种情况下都使用此参数，并且它会保持更新。

此外，您应该在 OlderSibling 中使用 this.props.currentCity 而不是在此组件中使用 this.state.currentCity，因为它的值已移入 Parent 的组件状态。

希望对您有所帮助。

Answer 4

前面的回答建议提升状态我也比较喜欢用

这是一个例子

React.js 将 prop 状态从同级转移到另一个同级？

React.js transferring prop state from sibling to a different sibling?

javascript

reactjs

ecmascript-6

react-props