如何在不同的地方用唯一的ID使用一个类组件?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在不同的地方用唯一的ID使用一个类组件?相关的知识,希望对你有一定的参考价值。

我想在不同的地方使用Buttons组件,但不是作为一个连续的项目列表,我不能使用array.map方法,因为它会产生连续的组件列表。我想为每一个(值)保留一个'id',这样我就可以识别它们。

class Buttons extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: 0,

    };
    this.increase = this.increase.bind(this);
    this.decrease = this.decrease.bind(this);
  }

  increase(e) {
    e.preventDefault();
    if (this.state.value < 10) {
       return this.setState(() => ({ value: this.state.value + 1 }));

    } else return null;
  }
  decrease(e) {
    e.preventDefault();
    if (this.state.value !== 0) {
      return this.setState(() => ({ value: this.state.value - 1 }));
    } else return null;
  }
  render() {
    return (
      <div>
        <button onClick={this.decrease}>-</button>
        <label>{this.state.value}</label>
        <button onClick={this.increase}>+</button>
      </div>
    );
  }
}

我想使用如下组件

  <li>
       Adults <Buttons id={10} key={10} />
  </li>
  <li>
       Students <Buttons id={20} key={20} />
  </li>
答案

你可能想要这样的东西。

function MyComponent() {
  const [adults, setAdults]  = React.useState(0)
  const [students, setStudents]  = React.useState(0)

  render (
    <ul>
      <li>
        Adults <Buttons value={adults} onChange={setAdults} />
      </li>
      <li>
        Students <Buttons value={students} onChange={setStudents} />
      </li>
    </ul>
  )
}

function Button({ value, onChange }) {
  return (
    <div>
      <button onClick={() => onChange(value - 1)}>-</button>
      <label>{value}</label>
      <button onClick={() => onChange(value + 1)}>+</button>
    </div>
  )
}

以上是关于如何在不同的地方用唯一的ID使用一个类组件?的主要内容,如果未能解决你的问题,请参考以下文章

每个组件实例的唯一 ID

由可通过基类访问的最派生类定义的唯一 ID

注意:雪花算法并不是ID的唯一选择!

如何使用 JSF 复合组件使页面上的 id 唯一?

如何使用组件类中的 react-router 链接来使用组件中的数据?

SnowFlake唯一ID生成器