Безопасно ли передавать наблюдаемые объекты mobx в качестве свойств для реагирования компонентов - PullRequest
Новая
       34

Безопасно ли передавать наблюдаемые объекты mobx в качестве свойств для реагирования компонентов

1 голос
/ 16 июня 2020

Скажем, у меня есть модель продукта, у которой есть 10+ атрибутов, и некоторые из них также являются объектами. 

{
  "product": {
    "name": "shoe",
    "brand": "....",
    "categories": {
      "abc": {
        ...
      }
    },
    ...
  }
}

Мне нужно обновить продукт в компоненте реакции, однако продукт также имеет некоторые дочерние элементы, которые будут просматриваться / изменяться другими компонентами. 

@observer
class ProductContainer extends Component {

    @observable product;

    render() {
        return (
            <ProductDetails product={product} />
        )
    }
}


@observer
class ProductDetails extends Component {

    static propTypes = {
        product: PropTypes.any
    }

    @autobind
    @action
    handleChangeName(event) {
        const {product} = this.props;
        product.name = event.target.value;
    }

    render() {
        const {product} = this.props;
        return (
            <form>
                <label>Name: <input type="text" onChange={this.handleChangeName} /> </label>
                <CategoryView categories={product.categories} />
            </form>
        );
    }
}

Как видно в примере, у меня есть внутренние компоненты, такие как CategoryView, которым я передаю дочерний объект наблюдаемого объекта (который также является наблюдаемым).

В этом примере я не изменяю ссылку product prop, а изменяю его дочерние элементы и атрибуты (например, имя).

React говорит, что props должен быть неизменным, однако приведенный ниже пример отлично работает. Насколько безопасно это делать?

Ответы [ 2 ]

2 голосов
/ 16 июня 2020

Выглядит нормально. Просто не забудьте разыменовать значения как можно позже .

2 голосов
/ 16 июня 2020

Это совершенно нормально с MobX, это правильный путь.

Иногда вы не хотите изменять атрибуты, как это, но создайте своего рода оболочку модели вокруг ваших данных (что-то вроде https://github.com/mobxjs/mobx-state-tree или его альтернативы) и используйте методы модели для изменения материала. Но ваш пример тоже в порядке.

Хотя вам нужно обернуть ProductDetails декоратором observer, чтобы он мог реагировать на изменения. (возможно, вы просто пропустили его в своем примере)

...