我正在尝试更好地理解键在 React 组件中的作用。我读了很多书,但我看到的每个示例(如 React docs 或 the great explanation on S.O. 中的示例)都假定进入组件的数据是动态的。
这些例子都是使用数组索引值或使用类似.map()
的方法为子组件的每个实例动态分配数据库ID,以满足React对键的需求。
我的例子是在一个静态网站上,静态内容进入被调用几次的子组件。最好的办法是,我可以创建一个随机数生成器函数 getRandomInt
并以此方式应用 key 。
不幸的是,这会导致熟悉的 React 错误:
Each child in an array or iterator should have a unique "key" prop. Check the render method of
CaseStudyOpinionSummary
. It was passed a child fromDiagnosticCaseStudy
.
我哪里错了?
父组件(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) }
/>
)
}
子组件(CaseStudyOpinionSummary
)
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>
)
}
}
最佳答案
React 只需要 key
属性来区分数组中的兄弟组件。对于常规同级组件,您不需要 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>
当一个组件获得一个新的 key
属性时,旧的将被卸载并丢弃,一个新的将被创建并挂载。您几乎从不在数组之外使用 key
属性,但如果您需要创建一个全新的组件,请牢记它是一个很好的技术。
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="root"></div>
关于javascript - 调用静态子组件时定义 React Prop 键,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51711938/