更新所有反应子组件

Question

我有这样的代码：

<Editor source="/api/customer" onCreate={this.debugChange} onDelete={this.debugChange} onUpdate={this.debugChange}>
    <Group title="Address">
        <Column id="id" label="ID" default={0} readonly />
        <Column id="name" label="name" default="" />
        <Column id="address" label="Address" default="" />
        <Column id="country" label="Country" default={currentCountry} readonly source="/api/country" idfield="id" captionField="name" />
    </Group>
    <Group title="Payment">
        <Column id="tax" label="TaxType" default={0} source="/api/taxtype" idfield="id" captionField="name" />
        <Column id="bank" label="Bank" default="" source="/api/banks" idfield="id" captionField="bank"/>
        <Column id="account" label="Account Number" default="" />
    </Group>
</Editor>

Editor 有一个这样的render() 函数：

    let components = React.Children.map(this.props.children, (child) => {
        return <Column {...child.props} default={row[child.props.id]} onChange={this.onChange.bind(this)} />
    })

    return <div className="hx-editor">
        <div className="hx-editor-list">
            <List id={this.props.id + "-list"} source={this.props.source}
                singleShow captionField={this.caption.bind(this)}
                groupfn={this.props.group} onSelect={this.onSelect.bind(this)} />
        </div>
        <form name={"hx-form-" + this.props.id} className="hx-form">
            {components}
            {buttons}
        </form>
    </div >

我在<List>的onSelect有这样的功能

private onSelect(id: string, data: T) {
    this.setState({
        currentRow: data,
        modifiedRow: data
    })
}

<Editor> 将显示来自/api/customer 和<List> 的列表，并将选定的值发送到onSelect 道具，进而更新所有<Column> 孩子。数据对应column的id，如：

data = [{
    id: 0,
    name: 'My Customer',
    address: 'This is Address',
    country: 'US',
    tax: '010',
    bank: 'HSBC',
    account:: '89238882839304'
}, ... ]

我放在这里的这个方法，只对<Editor>下的孩子有效，在<Group>下无效。

我的问题是，当用户单击<List> 中的值时，如何将<Column> 的所有值作为<Editor> 的子项进行深度更新。我的意思是，对所有子节点执行<Column> 搜索，并更新所有值，无论它们在哪里，只要在<Editor> 标记内。

感谢任何帮助。谢谢

Answer 1

好的...这会破坏 Typescript，我不知道如何在 Typescript 中正确输入，但是这个可以。

private deepColumn(children: React.ReactNode) => any) {
    return React.Children.map(children, child => {
        if (child.props.children) {
            child = React.cloneElement(child, {
                children: this.deepColumn(child.props.children)
            })
        }
        if (child.type.name == "Column") {
            return <Column {...child.props} default={this.default} onChange={this.onChange.bind(this)} />
        } else return child;
    })
}

Answer 2

<Group /> 作为中间“层”将“阻止更改传播”-此组件不“消耗”任何道具，因此不了解更改。

你可以/需要：

• 改变结构；
• 传递将被更改的道具（并将强制在孩子中更新）；
• 使用redux；
• 使用上下文 API。