javascript - 在 React 中将数据传递给组件(道具)
问题描述
我有一个 Counters 组件和一个 Counter 组件。Counters 类在下面,将四个 Counter 组件呈现到一个页面并设置它们的初始值。
import React, { Component } from "react";
import Counter from "./counter";
import Paper from '@material-ui/core/Paper';
import shadows from "@material-ui/core/styles/shadows";
import extendedIcon from "@material-ui/core/styles/shadows";
class Counters extends Component {
state = {
counters: [
{ id: 1, value: 2 },
{ id: 2, value: 0 },
{ id: 3, value: 3 },
{ id: 4, value: 0 },
],
};
render() {
return (
<div>
<Paper elevation={3} style={{padding: 20, margin:10, }}>
{ this.state.counters.map(counters =>
<Counter key={counters.id} value={counters.value} /> ) }
</Paper>
</div>
);
}
}
export default Counters;
在我的 Counter 类中,我有 this.props.value 的逻辑和值
但是, value 属性是未定义的。在将其更改为 props.value 之前,这工作得很好
柜台类;
import React, { Component } from "react";
class Counter extends Component {
state = {
value: this.props.value,
tags: ["Tag1","Tag2"]
}
constructor() {
super();
this.handleIncrement = this.handleIncrement.bind(this);
// handIncrement method needs to be binded to allow for 'this' keyword to have access to
it globally.
// You can also use the arrow function to bypass the super and binding methods.
}
renderTags() {
if (this.state.tags.length === 0) return <p>There are no tags!</p>;
return (
<ul>
{this.state.tags.map(tag => (
<li key={tag}> {tag} </li>
))}
</ul>
);
// Gives a key value to each element in the array. React needs to be able to access each element.
}
// handleIncrement() {}
handleIncrement = () => {
let counterValue = this.props.value
this.setState({ value: (counterValue += 1) });
console.log("Clicked")
console.log(counterValue)
// In React you need to set the state to update the view(UI). You cannot do it direct i.e this.state.count += 1 as a direct method.
};
getBadgeClasses() {
let classes = "badge m-2 badge-";
classes += this.props.value === 0 ? "warning" : "primary";
return classes;
}
formatCount() {
return this.props.value === 0 ? "zero" : this.props.value;
}
render() {
return (
<div>
{/* {this.state.tags.length === 0 && "Please create new tags"}
{/* Render a conditional statement in line - A populated string in JS is
considered truth y, so both values are true */}
<span
style={{ fontWeight: "bold", fontSize: 15 }}
className={this.getBadgeClasses()}
>
{this.formatCount()}
</span>
<button
onClick={this.handleIncrement}
className="btn btn-secondary btn-sm"
>
Increment
</button>
{this.renderTags()}
</div>
);
}
}
export default Counter;
我创建了一个新的 let 变量并将其设置为 props.value 的值,因为它是一个只读对象,但是我正在努力寻找原因。
我认为这个 Counter 类中道具的引用是将逻辑转发给 Counters 类以进行四次渲染。
有任何想法吗?
解决方案
这个片段有一些错误:
- 如果你使用
constructor
(你不应该)你需要用 props: 初始化实例super(props)
。
constructor(props) {
super(props);
...
}
- 在类函数中使用
this
时,您必须将其绑定到类实例,或者只使用箭头函数(参见上面的链接):
// should be arrow function
getBadgeClasses = () => {}
formatCount = () => {}
推荐阅读
- php - 是否有验证/功能来修剪 Laravel 中单词之间的句子中的空格
- spring - 运行一次 Spring Boot 应用程序并退出
- python - 使用 SQLAlchemy 将具有时区感知列的 Pandas 作为字符串插入 SQL Server
- c# - 为什么这个 Mandelbrot 计算返回一个圆?
- android - Imageview 的 onClick 是 Listview 的一个项目,在自定义适配器的 onClick() 方法中,我想获取 Listview 的所有行
- javascript - 如何在包含选择器中使用井号 (£)?
- javascript - Angular:我有一个带有循环索引的 NgFor,如何将元素的名称指定为“myName+IndexOfLoop”
- ios - 如何处理登录响应中的空值?
- cypress - CYPRESS :获取属性值,然后只获取数值
- javascript - javascript getElementsByClassName 不适用于多个输入