Question

我当前的结构是这样的：

 state={
activetab=1,
activetab2=2}

 <child1 activetab={activetab}/>
 <child2 activetab2={activetab2}/>

我想当用户从子2更改活动选项卡以更新父组件上的状态，然后还处理child1组件上的更改。

子1代码：

render() {
const activetab=this.props;

this.showimage1 = () => {
  if (activetab === 1) {
    return (

        <img src={slide1} alt='' /> 
    )
  } else null;
}
 return (
  <div>
      {this.showimage1()}
  </div>

子2代码：

   constructor (props) {
   super(props)
   this.changetab= this.changetab.bind(this)
   this.state={
   activetab:1}
   }


  render () {
  const activetab2=this.props;
   changetab(tab) {
if (this.state.activeTab !== tab) {
  this.setState({
    activeTab: tab
  })
}
}
return(
 <div>
 <button  onClick={() => {
          this.changetab(1)
        }}
  >tab1 </button>
  </div>

因此，如您所见，当用户从子级2更改当前选项卡以在我的父级组件中传递道具时，我想要的，以便child1组件根据选项卡知道要显示的图像。有谁知道如何在不重写单个组件中所有内容的情况下做到这一点？

Answer 1

创建一个渲染两个子组件1和2的主要组件，仅创建1个真相来源，这意味着只有1个状态作为道具传递给子组件。

  export class MainComponent extends Component {

    constructor (props) {
       super(props)
       this.changetab = this.changetab.bind(this)
         this.state={
           activetab: 0
         }
       }

       changetab(tab) {
         if (this.state.activeTab !== tab) {
         this.setState({
             activeTab: tab
         })
       }


       render() {
         return (
           <div>
             <ChildOne activetab={this.state.activetab} />
             <ChildTwo activetab={this.state.activetab} changetab={this.changetab} />
           </div>
         )
       }
   }



    // ChildOne Component pass state activetab as props

        render() {
        const { activetab } = this.props;

        this.showimage1 = () => {
          if (activetab === 1) {
            return (

                <img src={slide1} alt='' /> 
            )
          } else null;
        }
         return (
          <div>
              {this.showimage1()}
          </div>


    // ChildTwo Component


    render () {
    const { activetab, changetab } = this.props;

    return(
     <div>
     <button  onClick={() => {
              this.changetab(1)
            }}
      >tab1 </button>
      </div>

Answer 2

您可以将组件包装在父组件中。然后，您可以通过将功能附加到道具将功能从父级传递给子级2。然后，孩子2可以在更改时调用此函数。

在父级中：

render() {
    const someFunction = (someVariable) => {
        // do something
    }

    return(
        <child2 somePropName={ this.someFunction } />
    )
}

编辑：从该示例中删除了.bind()

Answer 3

父组件必须具有2个传递给孩子的功能handleChange。

看起来会像这样

    // Parent
class Parent extends React.Component {
  // Constructor
  constructor(props) {
    this.state = {
      child1: 1,
      child2: 0
    };
  }

  handleChangeChild1(state) {
    this.setState({ child1: state });
  }

  handleChangeChild2(state) {
    this.setState({ child2: state });
  }

  render() {
    return (
      <div>
        <Child1 onXChange={this.handleChangeChild1} />
        <Child2 onYChange={this.handleChangeChild2} />
      </div>
    );
  }
}

在孩子们中，你做

class Child extends React.Component {
   constructor(props) {
     super(props)
   }

    handleChange(e) = () => {
    this.props.onXChange
    }

    render() {
      return (
          <input onChange={this.handleChange} />
      )
    }
}

我建议您阅读doc

反应传递道具给孩子并返回给父母

3 个答案: