Обновить все реагирующие дочерние компоненты - PullRequest
Новая
       7

Обновить все реагирующие дочерние компоненты

0 голосов
/ 25 ноября 2018

У меня есть такой код: 

<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 с <List> и отправит выбранные значения в onSelect реквизиты, которые, в свою очередь, обновят все <Column> дочерние элементы.Данные соответствуют идентификатору столбца, например: 

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

Этот метод, который я здесь описал, работает только с дочерними элементами непосредственно под <Editor>, но не под <Group>.

У меня вопрос, как я могу выполнить глубокое обновление всех значений <Column> как дочерних элементов <Editor>, когда пользователь щелкнул по значению в <List>.Я имею в виду, выполнить <Column> поиск по всем дочерним элементам и обновить все значения, независимо от того, где они находятся, если они находятся в теге <Editor>.

Любая помощь приветствуется.Спасибо

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Хорошо ... Это сломает 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;
    })
}
0 голосов
/ 25 ноября 2018

<Group /> в качестве промежуточного «слоя» будет «блокировать распространение изменений» - этот компонент не «потребляет» никакой подпорки и поэтому не знает об изменениях.

Вы можете / нужно:

  • изменить структуру;
  • передать реквизит, который будет изменен (и вызовет обновления у дочерних элементов);
  • использовать избыточность;
  • использовать контекстный API.
...