如何制作可重用的React / MobX组件？

问题描述 投票：3回答：2

我看到的将React组件与MobX存储集成的示例似乎是紧密耦合的。我想以更加可重用的方式做到这一点，并希望有助于理解“正确”的方式来做到这一点。

我编写了以下代码（React + MobX + Typescript）来说明我想要做的事情以及我遇到的问题。

该商店有多个可观察的时间戳。

/***
 * Initialize simple store
 */
class MyStore {
  @observable value: number;
  @action setValue(val: number) { this.value = val; }

  @observable startTimestamp: number;
  @action setStartTimestamp(val: number) { this.startTimestamp = val; }

  @observable endTimestamp: number;
  @action setEndTimestamp(val: number) { this.endTimestamp = val; }
}

假设我想创建一个可重用的日期输入组件，允许用户输入startTimestamp，endTimestamp或其他某个store属性的日期。更一般地说，我想创建一个组件，我可以用来修改任何商店的任意属性。

我对React / MobX集成的最好理解是组件接收MobX存储，读取存储的可观察属性并可以执行操作来修改这些属性。但是，这似乎假设组件连接到商店属性的名称，这使得它们不能完全重用。

我已尝试使用以下“代理存储”方法将我想要的属性公开为“value”：

class MyStoreTimestampProxy {
  constructor(private store: MyStore, private propertyName: 'startTimestamp' | 'endTimestamp') {
  }

  @observable get value() {
    return this.store[this.propertyName];
  }

  @action setValue(val: number) {
    this.store[this.propertyName] = val;
  }
};
const myStoreStartTimestamp = new MyStoreTimestampProxy(myStore, 'startTimestamp');
const myStoreEndTimestamp = new MyStoreTimestampProxy(myStore, 'endTimestamp');

但是，我觉得我不是以某种方式做React / MobX的方式，并且想要了解这里的最佳实践。谢谢！

完整代码如下：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';

/***
 * Initialize simple store
 */
class MyStore {
  @observable value: number;
  @action setValue(val: number) { this.value = val; }

  @observable startTimestamp: number;
  @action setStartTimestamp(val: number) { this.startTimestamp = val; }

  @observable endTimestamp: number;
  @action setEndTimestamp(val: number) { this.endTimestamp = val; }
}

const myStore = new MyStore();
myStore.setValue(new Date().getTime());

/**
 * My time input component. Takes in a label for display, and a store for reading/writing the property.
 */
interface IDateInputProps {
  label: string;
  store: {
    value: number;
    setValue(val: number): void;
  }
}

interface IDateInputState {
  value: string;
}

@observer class DateInput extends React.Component<IDateInputProps, IDateInputState> {
  constructor(props: IDateInputProps) {
    super(props);
    this.state = { value: new Date(props.store.value).toDateString() };
  }

  render() {
    return (
      <div>
        <label>{this.props.label}
          <input
            value={this.state.value}
            onChange={this.onChange.bind(this)} />
        </label>
      </div>
    );
  }

  onChange(event) {
    const date = new Date(event.target.value);
    this.setState({ value: event.target.value });
    this.props.store.setValue(date.getTime());
  }
}


/**
 *  Test view
 *
 */
class TestView extends React.Component {
  render() {
    return (
      <div>
        <DateInput label="Editing the value property of store: " store={myStore}></DateInput>

        {/* How to create components for startTimestamp and endTimestamp */}
      </div>
    );
  }
};

ReactDOM.render(<TestView />, document.getElementById('root'));
reactjs typescript mobx
2个回答
4
投票

主要问题来自你在store组件中有DateInput的状态依赖性，这使得它几乎不可重用。你需要的是打破这些引用，而不是直接从可重用组件访问商店引用，你必须在父级的道具中提供它们。

我们走吧。

首先，如果我很好理解，如果您像这样修改商店，我认为您的问题会更容易：

class MyStore {
   @observable state = {
     dateInputsValues : [
                          { value: '01/01/1970', label: 'value'}, 
                          { value: '01/01/1970', label: 'startTimestamp' }, 
                          { value: '01/01/1970', label: 'endTimestamp' }
                        ]
   }
}

现在，您将能够在dateInputsValues中循环DateInput并避免代码重复。

那么，为什么不用你需要的观察物（即标签和价值）传递道具，而不是通过整个商店？

@observer 
class TestView extends React.Component {
  render() {
    return (
      <div>
        {myStore.state.dateInputsValues.map(date => 
          <DateInput 
             label={`Editing the ${date.label} property of store: `} 
             value={date.value} 
          />
        }
      </div>
    );
  }
};

打破DateInput中对商店的旧引用（正如你所说，使组件“紧密耦合”到商店并使其难以重复使用）。用我们添加的道具替换它们。

删除DateInput内部state。在实际代码中，您暂时不需要组件内部状态。您可以直接将状态存储用于此类方案。

最后，添加一个action方法，修改value prop，因为你似乎处于MobX严格模式（否则，你可以将值设置在action之外）

@observer 
class DateInput extends React.Component<IDateInputProps, IDateInputState> {    
  render() {
    return (
      <div>
        <label>{this.props.label}
          <input
            value={this.props.value}
            onChange={this.onChange} />
        </label>
      </div>
    );
  }

  onChange = event => {
    const date = new Date(event.target.value);
    this.setDateInputValue(date.getTime());
  }

  @action
  setDateInputValue = val => this.props.value = val
}
0
投票

我认为我遇到的核心问题是如何将原始属性传递给组件。

由于我来自AngularJS背景，我试图沿着这些方向复制一些东西：

<input ng-model="myStore.startTime" />
<input ng-model="myStore.endTime" />

在AngularJS中，startTime和endTime可以只是字符串或数字。但这在React + MobX中不起作用。除非传入拥有该属性的对象，否则组件无法修改属性，这在处理基本属性时会出现问题（因为它们将具有任​​意名称且不具有自己的属性）。

最简单的方法可能是这样的：

class MyStore {
  @observable startTime: { value: number };
  @observable endTime: { value: number };
}

既然startTime和endTime是拥有属性而不是基元的对象，我可以将它们传递给组件，如下所示：

@observer 
class DateInput extends React.Component<{timestamp: {value: number}}> {

然后像这样实例化：

<DateInput timestamp={myStore.startTime}></DateInput>
<DateInput timestamp={myStore.endTime}></DateInput>

顺便说一句，我读过我应该在商店中保留操作，但这似乎增加了许多额外的样板和复杂功能，所以我很高兴有组件执行操作。

感谢@ samb102帮助我做到这一点。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.