Question

我们说我有以下内容：

class LeftPanel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {abc: 'xyz'};
  }
render() {
  return (
    <div>
     <Thumb src={img1}/>
     <Thumb src={img2}/>
   </div>);
 }

在组件内部，有一个名为 Thumb 的内部组件，就像那样：

class Thumb extends React.Component {
  constructor(props) {
   super(props);
   this.state = { src: props.src };
  }

  render() {
   return (
    <div>
      <img src={this.state.src}></img>
    </div>
   );
  }

}

问题：我可以修改Thumb内部的LeftPanel组件的状态吗？如果是，怎么样？

Answer 1

在左侧面板中创建一个方法来处理事件。然后将该方法传递给子组件。

现在，如果您想将数据传递给父级，我建议使用像flux或redux这样的库。由于redux具有全局状态，因此所有组件都可以访问它。将全局状态修改为整个应用程序时，将使用新状态重新呈现。所有组件都可以看到新状态。

class LeftPanel extends React.Component {
  constructor(props) {
    super(props);
    this.modifyLeftpanel = this.modifyLeftpanel.bind(this);
    this.state = {abc: 'xyz'};
  }

  modifyLeftpanel(newvar){
      //Do something with newvar
  }
render() {
  return (
    <div>
     <Thumb src={img1} modifyLeftPanel={this.modifyLeftpanel}  />
     <Thumb src={img2} modifyLeftPanel={this.modifyLeftpanel} />
   </div>);
 }

这是拇指

class Thumb extends React.Component {
  constructor(props) {
   super(props);
   this.state = { src: props.src };
   this.doSomething = this.doSomething.bind(this);
  }

  doSomething(){
       this.props.modifyLeftpanel(10);
  }

  render() {
   return (
    <div>
      <img src={this.state.src}></img>
      <button onClick={this.doSomething}>Modify Parent</button>
    </div>
   );
  }

我可以在ReactJs中修改组件的父状态吗？

1 个答案: