代码之家 › 专栏 › 技术社区 › Magician

更新所有子组件

typescript3.0 reactjs

Magician · 技术社区 · 7 年前

我有这样一个代码:

<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>

编辑有一个 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 <列表> 当选 道具,这些道具反过来会更新所有道具 <Column>

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

我放在这里的这个方法,只适用于直接受教育的儿童 < ,但不在 <Group>

我的问题是,我怎样才能深入更新 <列> 作为 <编辑> 当用户单击中的值时的子项 < . 我是说,表演 < 搜索所有子项,并更新所有值,无论它们位于何处,只要在 < 标签。

感谢您的帮助。非常感谢。

2 回复 | 直到 7 年前

xadm 7 年前

<Group /> 由于中间“层”将“阻止更改传播”-此组件不会“使用”任何道具,因此不会感知更改。

您可以/需要:

改变结构;
使用redux;
使用上下文API。

Magician 7 年前

好啊这将破坏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;
    })
}