Question

在React中，我们正在加载一个定义自己ID的子组件列表。我们希望然后根据他们设置的内部ID重新安排孩子。我们如何将内部ID传达给父母？也可以将该ID用作父渲染ekey。请注意，内部ID与组件名称不匹配。

class Thing1 extends React.Component {
   const ID = 'Thing1IDString';
}

class Thing2 extends React.Component {
   const ID = 'Thing2IDString';
}


<Parent>
 <Thing1 />
 <Thing2 />
 <Thing3 />
</Parent>

Answer 1

我建议的第一件事是尝试让父母知道如何以某种方式计算子ID。如果子ID来自数据库，则让父计算它们而不是让子计算它们。树中较低的组件应该不太智能化。把它们最终形式的所有东西交给他们，这样他们就可以简单地渲染它。

您正在谈论的结构，即孩子拥有父母需要采取行动的“私人”数据，通常在React中通过以下方式解决：

将该数据存储在父
将数据作为道具传递给孩子
将onDataChanged函数传递给子项，以便子项可以在数据更改时告诉父项。

这是“受控输入”模式。起初感觉很尴尬，乍一看似乎有太多的间接性。但优点是数据流非常可预测。

现在，如果你的情况不可能，并且真的需要孩子们“注册”父母，那么你可以使用道具或上下文来传递{{1}给孩子们的功能。在子级中，使用其registerChild生命周期方法以其计算的ID调用componentDidMount函数。然后，父母可以跟踪这些ID，但需要跟踪。

Answer 2

你的语法有点令人困惑。让我们将伪示例转换为实际工作的ReactJS代码示例。

我们假设你有一个孩子的成分：

class Thing1 extends React.Component {
    constructor(props) {
        super(props);

        this.id = 'Thing1IDString';
    }

    render(){
        return (
            <p>Child component</p>
        );
    }
}

如果您想从父组件访问Thing1的 id 属性，有多种方法可以communicate between components。

这取决于你想要达到的目标。如果您只想访问子组件属性，可以使用refs：

class Parent extends React.Component {
    doSomething() {
        // Access anything you need from `this.refs.thing1`
        const thing1ID = this.refs.thing1.id;
    }
    render() {
        return (
            <div>
                <button onClick={this.doSomething.bind(this)}>Get ID</button>
                <Thing1 ref="thing1" />       
            </p>
        );
    }
}

Answer 3

我在这里碰到了上述问题：https://github.com/facebook/react/issues/15320

可以使用3种方法来实现父子数据传输（上下文Api，mutatiin，Reac.Children深度遍历）。

在React中，我如何让孩子告诉父母其关键？

3 个答案: