Question

我有以下模式

class List {
  list: string[] = [];

  showList() {
    return this.list.map(element => <div>{element}</div>);
  }

  showOptions() {
    return (
      <div>
        <div onClick={() => this.addToList('value1')}>Value #1</div>
        <div onClick={() => this.addToList('value2')}>Value #2</div>
        <div onClick={() => this.addToList('value3')}>Value #3</div>
        <div onClick={() => this.addToList('value4')}>Value #4</div>
      </div>
    );
  }

  addToList(value: string) {
    this.list.push(value);
  }
}


class App extends Component {
  myList: List;

  constructor(props: any) {
    super(props);
    this.myList = new List();
  }

  render() {
    <div>
      Hey this is my app
      {this.myList.showOptions()}
      <div>{this.myList.showList()}</div>
    </div>
  }
}

它很好地显示了我的选项，并且当我单击列表时将元素添加到列表中。但是，永远不会从showList再次调用App函数，因此不会显示任何更新。

如何更新List时重新发布主要组件？我不确定我的设计模式是否良好。我的目标是管理班级内部显示的内容，并仅从其他组件中调用显示功能。

Answer 1

我们应该始终使用state重新呈现React组件。

Answer 2

不确定您要精确完成什么，但希望这可以使您大致了解Jim对使用状态的意义：

const Option = React.memo(function Option({
  value,
  onClick,
}) {
  return <div onClick={() => onClick(value)}>{value}</div>;
});
const Options = React.memo(function Options({
  options,
  onClick,
}) {
  return (
    <div>
      {options.map(value => (
        <Option
          key={value}
          value={value}
          onClick={onClick}
        />
      ))}
    </div>
  );
});
class List extends React.PureComponent {
  state = {
    options: [1, 2, 3],
    selected: [],
  };

  showList() {
    return this.list.map(element => <div>{element}</div>);
  }

  add = (
    value //arrow funcion to bind this
  ) =>
    this.setState({
      options: this.state.options.filter(o => o !== value),
      selected: [...this.state.selected, value],
    });
  remove = (
    value //arrow funcion to bind this
  ) =>
    this.setState({
      selected: this.state.selected.filter(
        o => o !== value
      ),
      options: [...this.state.options, value],
    });

  render() {
    return (
      <div>
        <div>
          <h4>options</h4>
          <Options
            options={this.state.options}
            onClick={this.add}
          />
        </div>
        <div>
          <h4>choosen options</h4>
          <Options
            options={this.state.selected}
            onClick={this.remove}
          />
        </div>
      </div>
    );
  }
}

const App = () => <List />;

//render app
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

根据对象更新重新渲染组件

2 个答案: