Question

我有以下组件结构：

       <ParentComponent />
 <Child 1 />     <Child 2 />

基本上，Parent组件是站点的主要包装器;它只是呈现一些div标签，其中包含一堆其他组件（比这两个更多的方式）

子级1 - 此组件控制站点上某些网格的布局。

Child 2 - 这实际上是导航栏。但是，我想在导航栏中有一个按钮来重置Child 1中的布局 - 基本上，通过将状态设置为空数组来重置数组。一个简单的功能。

如何从Child 2调用Child 1中的resetLayout函数？

样品：

class Index extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            layout: []
            },
        };

    render () {

        return (
            <div>
                <NavigationBar />
                <GridLayout/>
            </div>
        )

    }
}



class NavigationBar extends React.Component{



    render () {

        return (
            <div>
                <Button onClick={this.resetLayout} /> // Want to reset layout from here
            </div>
        )

    }
}


class GridLayout extends React.Component{


    resetLayout = () => {
        this.setState({
            layout: []
        });
    };

    render () {

        return (
            <div>
                // Fancy layout goes here
            </div>
        )

    }
}

基本上，布局是GridLayout中的状态。如何从NavigationBar组件访问其中的功能？

Answer 1

您可以通过

向层级发送命令

在父组件中实现该函数并将其传递给子组件
从孩子那里打电话

在您的索引类中：

resetLayout() {
    this.setState({ layout: [] });
}

// in render function
<NavigationBar resetLayout={this.resetLayout.bind(this)} />

在<NavigationBar> render()：

<Button onClick={this.props.resetLayout} />

通过将父级的状态传递给另一个子级，您可以有效地将消息一直发送到：

<GridLayout layout={this.state.layout} />

Answer 2

以下是如何从兄弟组件执行函数的片段。执行此操作的“正常”方法是在父级中创建一个调用子函数的函数。然后将该函数传递给另一个孩子：

var Parent = React.createClass({
  reset: function() {
    this.refs.childTwo.resetFunction();
  },
  render: function() {
    return (
      <div>
        <ChildOne reset={this.reset} />
        <ChildTwo ref="childTwo" />
      </div>
    );
  }
});

var ChildOne = React.createClass({
  render: function() {
    return <button onClick={this.props.reset}>Reset the text</button>;
  }
});

var ChildTwo = React.createClass({
  getInitialState: function() {
    return {text: "Default text"};
  },
  resetFunction: function() {
    this.setState({text: "Reset!"});
  },
  render: function() {
    return <div>{this.state.text}</div>;
  }
});

ReactDOM.render(<Parent />, document.getElementById('myapp'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="myapp"></div>

Answer 3

我已经实现了小型工作模型，它可以更新布局中的数组。您可以在此处添加布局数据

class NavigationBar extends React.Component{
    constructor(props) {
        super(props);
        this.reset = this.reset.bind(this);
        };
      reset(){
      var t=[];
      t[0]=Math.random();
      t[1]=Math.random();
      this.props.resetLayout(t);

      }

    render () {

        return (
            <div>
                <button onClick={this.reset}>Reset Layout</button> 
                <GridLayout/>
            </div>
        )

    }
}


class GridLayout extends React.Component{

  
    resetLayout = () => {
        this.setState({
            layout: []
        });
    };
    componentWillMount(){
      this.setState({
        layout : this.props.layout
      })
     }
     
     componentWillReceiveProps(nextProps){
     this.setState({
      layout : nextProps.layout
     })
     }
    render () {
    
        return (
            <div>
                {this.state.layout}
            </div>
        )

    }
}

class Index extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            layout: []
            }
        };
    resetLayout(newlayout){
      this.setState((state,props)=>{
      return {
        layout : newlayout
      }
      })
      console.log('resetting the layout')
    }
    render () {

        return (
            <div>
                <NavigationBar resetLayout={this.resetLayout.bind(this)} />
                <GridLayout layout={this.state.layout} />
            </div>
        )

    }
}

ReactDOM.render(<Index />,document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'>

</div>

如何在React中调用并行组件中的函数？

3 个答案: