Question

我有一个父组件和2个孩子。每个子节点都是输入字段，第二个输入取决于第一个输入字段的选择。是否可以在响应中调用函数洞察兄弟2，只有在Parent中的函数被执行时？在我的情况下：Child1提供ID，父使用ID，Child2应该使用相同的ID发出http请求。

下面是我的代码（我遗漏了很多，所以我没有太多（不必要的代码），所以如果我错过了某些内容请告诉我）在Parent内部，“updateId”方法从child1接收了它的参数，只有在发生这种情况时（提供了id），才会在Sibling中调用“getData”方法。我想我可以在Parent设置为true的情况下创建布尔值，当给出id时，将其传递给Sibling，只有当它的真实时才调用“getData”方法，但据我所知，这在反应中是不可能的？！我怎么能这样做？

PS - 我故意在我的子组件中设置状态，因为我试图保持输入（子=输入）独立，这很容易交换。

export default class Parent extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            id: ""
        }
        this.updateId=this.updateId.bind(this);
    }

    updateId (id){
        this.setState({
            id:id
        })

    }

    render() {
        return (
            <div>
                <Child onChange={this.updateId} />
                <Sibling id={this.state.id}/>
            </div>
        )
    }
};

import apicall from :/....jsx;
export default class Sibling extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            siblings: []
        }
        this.getData=this.getData.bind(this);
    }

    getData (this.props.id){
        apiCall(this.props.id).then(response=> {
            this.setState({
                siblings:response
            })

    }

    render() {
        return ...
    }
};

    export default class Child extends React.Component {
    ...
    get ID
    ...
    call this.props.onChange(selected.value)

    };

Answer 1

在这样的情况下，我通常会将我的状态保持在父级（或者像Redux这样的系统中），并保持我的子组件简单和愚蠢。因此，我将在父级中执行API工作，并将结果数据传递给子级。

也就是说，如果ID属性发生变化，您的Sibling组件可以挂钩componentWillReceiveProps并更新其状态。

https://reactjs.org/docs/react-component.html#componentwillreceiveprops

Answer 2

为避免儿童与儿童之间的沟通混乱，请使用 Redux ，它可以帮助您实现所需的功能。它还可以帮助你制作愚蠢的组件。

React - 如何调用Child中的方法setState，仅当调用Parent中的方法时？

2 个答案: