如何根据通过props传递的值在React中创建多个标签
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何根据通过props传递的值在React中创建多个标签相关的知识，希望对你有一定的参考价值。
如何根据在props或初始状态中传递的值创建多个元素。
constructor(props, context) {
this.state = {
numberOfElements: this.props.numberOfElements || 6
}
render() {
return (
<div>
{/*Six elements if not passed through props*/}
span
span
...
span
</div>
)
}
是否有React.method可用于此目的？
答案
使用元素数组来呈现多个元素
constructor(props, context) {
this.state = {
numberOfElements: this.props.numberOfElements || 6
}
renderElements(){
let elements = [];
let total = this.props.numberOfElements || this.state.numberOfElements;
for(let i = 0;i < total;i++){
elements.push(<span>Hello</span>)
}
return elements;
}
render() {
return (
<div>
{this.renderElements()}
</div>
)
}
另一答案
您应该使用数组来迭代和创建元素。 一种方法可能是：
render() {
const myArray = new Array(this.state.numberOfElements).fill('bar'); // array with 6 members ("bar")
return (
<div>
{myArray.map(i=><span>foo</span>)}
</div>
)
}
运行示例：
class App extends React.Component {
constructor(props){
super(props);
this.state = {
numberOfElements: this.props.numberOfElements || 6
}
}
render() {
const myArray = new Array(this.state.numberOfElements).fill('bar');
return (
<div>
{myArray.map(i => <div>foo</div>)}
</div>
)
}
}
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>另一答案
这可能是ES6中最干净的一个
render() {
return (
<div>
{[...Array(4).keys()].map(i => <span key={i}/>)}
</div>
)
}
以上是关于如何根据通过props传递的值在React中创建多个标签的主要内容，如果未能解决你的问题，请参考以下文章