reactjs - 在理解道具时遇到问题 - 有人可以解释道具是什么。被通过了?
问题描述
我试图理解在下面的代码中传递的道具......通过构造函数传递的道具也是什么?是价值吗?
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('root')
);
解决方案
道具只是将对象(变量或函数等)传递到组件中以供该组件使用的一种方式。
可以这样想——你想在多个地方使用这个组件,所以它有助于传递表单需要的初始数据,而不是让表单需要自己获取数据。这使它保持封装和可重复使用。
因此,在使用该组件时,您可以将需要在表单中呈现的用户数据作为 prop 传入:
ReactDOM.render(
<NameForm user={user} />,
document.getElementById('root')
);
在您的组件中,您可以根据需要使用道具。举个例子:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {user: props.user};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
...
<input type="text" value={this.state.user.name}
推荐阅读
- r - 基于现有变量创建多个新变量并同时重新编码它们 R
- python - 使用 python 更新 mongoDB
- rust - 返回 PhysicalDevice (Vulkano) 时“无法返回引用局部变量的值”
- string - Go中的空字符串作为映射键?
- kubernetes - Lens (Kubernetes IDE) 如何在没有 ssh 密钥的情况下获得对 Kubernetes 节点的直接 shell 访问?
- java - 如何在android studio中制作一个侧面箭头?
- php - 如何在浏览器的橙色表格中查看 Xdebug 中的错误?
- c++ - C ++线程连续写入并在未知时间读取
- css - Vuetify 日历高度问题
- flutter - 值首先以 null 显示,然后在颤动中显示正确的值