代码之家 › 专栏 › 技术社区 › serraosays

调用静态子组件时定义React Prop键

random reactjs javascript

serraosays · 技术社区 · 6 年前

我试图更好地理解键在React组件中的作用。我读了很多,但是我看到的每个例子(比如 React docs 或 the great explanation on S.O. )假设进入组件的数据是动态的。

这些示例都应用具有数组索引值的键或使用类似于 .map() 动态地将数据库id分配给子组件的每个实例,并满足React对键的需求。

我的例子是在一个静态站点上,静态内容进入子组件,子组件被调用了几次。我最好能创建一个随机数生成器函数 getRandomInt 然后把钥匙用那种方法。

不幸的是,这会导致常见的反应错误:

数组或迭代器中的每个子项都应具有唯一的“键”属性。检查的渲染方法 CaseStudyOpinionSummary . 它通过了孩子来自 DiagnosticCaseStudy .

我哪里做错了?

父组件( 诊断案例研究 )

import React from 'react'
import CaseStudyOpinionSummary from '../../../components/CaseStudyOpinionSummary'

export default class DiagnosticCaseStudy extends React.Component {

  getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min
  }

  render() {
    return (
      <CaseStudyOpinionSummary
        part="Part One"
        partTitle="Diagnosis"
        partSubtitle="Primary Care Encounter"
        partSummary="Short brief"
        key={ this.getRandomInt(0, 100000) } 
      />
      <CaseStudyOpinionSummary
        part="Part Two"
        partTitle="Medication and Management"
        partSubtitle="Initial Gastroenterologist Encounter"
        partSummary="Another short brief"
        key={ this.getRandomInt(0, 100000) } 
      />
    )
  }

子组件( 案例研究概要 )

import React from 'react'

export default class CaseStudyOpinionSummary extends React.Component {

  render() {
    return (   
      <div> 
        <section className="lightest-gray-bg">
          <section className="aga-cs-container-short">
            <section className="aga-container">
              <h2 className="aga-cs-orange-title">{[this.props.part, ": ", this.props.partTitle ]}</h2>
              <h2 className="aga-cs-question-title">{ this.props.partSubtitle }</h2>
              { this.props.partSummary }
            </section>
          </section>
        </section>
      </div>
    )
  }
}

1 回复 | 直到 6 年前

Tholle 6 年前

反应只需要 key 属性来区分数组中的同级组件。你不需要 钥匙 常规同级组件的道具。

class AppWithArray extends React.Component {
  render() {
    return (
      <div>
      {[
        <div key="1"> test1 </div>,
        <div key="2"> test2 </div>
      ]}
      </div>
    );
  }
}

class AppWithoutArray extends React.Component {
  render() {
    return (
      <div>
        <div> test3 </div>
        <div> test4 </div>
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <AppWithArray />
    <AppWithoutArray />
  </div>,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

当一个组件得到一个新的 钥匙 道具,旧的将被卸下扔掉,一个新的将被创造和安装。你几乎从不使用 钥匙 道具在数组之外,但是如果您需要创建一个全新的组件,记住这是一个很好的技术。

class Timer extends React.Component {
  timer = null;
  state = { count: 0 };

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState(prevState => ({ count: prevState.count + 1 }));
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

class App extends React.Component {
  state = { timerKey: 1 };

  componentDidMount() {
    setTimeout(() => {
      this.setState({ timerKey: 2 });
    }, 5000);
  }

  render() {
    return <Timer key={this.state.timerKey} />;
  }
}

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

<script src=“https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js”></script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react dom.min.js”></script>

<div id=“根”></div>