#reactjs #antd
#reactjs #antd
Вопрос:
Я использую шаги из antD и сталкиваюсь с проблемой при обновлении шагов с изменением реквизита.
import Step1 from './step1.js'
import Step2 from './step2.js'
import {Steps} from 'antD'
state={
list:[]
step: [
{
title : "first"
content : this.step1()
}
{
title : "Second"
content : <Step2 list={this.list}/>
}
]
}
step1=()=>{
return (
<Step1/>
)
}
render(){
<div >
<Steps current={current}>
{this.state.step.map((item) => (
<Step key={item.title} title={item.title} />
))}
</Steps>
<div >{this.state.step[current].content}</div>
<div>
{current < this.state.step.length - 1 amp;amp; (
<Button type="primary" onClick={() => this.next()}>
Next
</Button>
)}
{current === this.state.step.length - 1 amp;amp; (
<Button
type="primary"
onClick={() => message.success("Processing complete!")}
>
Done
</Button>
)}
{current > 0 amp;amp; (
<Button onClick={() =>
this.prev()}>
Previous
</Button>
)}
</div>
</div>
}
this.state.list
обновляется каждый раз f
, когда запускается функция, но список в Step2
не обновляется. Всегда передается значение null.
РЕДАКТИРОВАТЬ: как мне получить доступ step1()
к внутреннему состоянию. this
будет ссылаться на состояние внутри состояния.
Это мой полный код..
Комментарии:
1. Я считаю, что содержимое будет создано и
this.list
будет разрешено при создании состояния. Таким образом, ваш step2 всегда будет иметь начальное значение. Кроме того, разве это не былоthis.state.list
бы в step2 в любом случае?2. @ZacharyHaber в данном случае это будет относиться к состоянию, вот почему this.list
Ответ №1:
Не переводите элементы React в состояние — это часто приводит к поломке, особенно если они принимают реквизит, который вы хотите изменить при рендеринге.
Вместо этого, чтобы React мог естественным образом обновлять реквизиты подкомпонентов, объявляйте и передавайте подкомпоненты внутри метода рендеринга, чтобы при каждом обновлении состояния метод рендеринга можно было вызывать снова с передачей новых реквизитов.
Например, вместо:
render() {
return (
<div>
{this.state.step[1].content}
</div>
)
}
делать
render() {
return (
<div>
<Step2 list={this.list} />
</div>
)
}
Комментарии:
1. как получить доступ к функции внутри состояния? «это» вызовет состояние? редактирование вопроса
2. Обычно не- состояние должно содержать только данные , а не функции, которые зависят от контекста вызова. Не стесняйтесь вызывать функции в
render()
или в другом месте, но не храните функции в состоянии.3. Не могли бы вы один раз проверить мой код. Я не понимаю, как поступить в этом случае. Похоже, я где-то ошибаюсь