reactjs - 从另一个组件初始化一个组件的状态并获取状态值
问题描述
我是异步机制的 reactnative/js 世界的新手,我读了很多类似的例子,但我不清楚。所以请在这里找到我的问题。
我正在尝试创建一个组件(在示例中称为“锚”)并从另一个组件更新其状态(名称参数)。我想从父组件中获取“锚”组件的属性 state.name 值。我的问题如下: - 锚组件的创建似乎没有处理组件创建的 props.name 参数 - 我不知道如何从父级访问组件状态参数值(his.state.name)组件(示例中的 App)
https://jsfiddle.net/n5u2wwjg/203556/
锚组件
class Anchor extends React.Component{
constructor(props) {
super(props)
this.state = {
name : props.name
}
this.name = this.state.name;
}
/*
getName(){
return this.state.name;
}
*/
}
和 App 组件:
class App extends React.Component <any> {
constructor(props) {
super(props)
this.state = {
anchor : undefined,
items: [
{ text: "Learn JavaScript", done: false },
{ text: "Learn React", done: false },
{ text: "Play around in JSFiddle", done: true },
{ text: "Build something awesome", done: true }
]
}
}
addAnchor(){
var anchor = new Anchor('hello');
this.setState({
anchor : anchor,
});
console.debug('get my anchor name: '+ this.state.anchor.name);
}
render() {
return (
<div>
<h2>Todos:</h2>
{this.state.anchor.name}
<ol>
{this.state.items.map(item => (
<li key={item.id}>
<label>
<input type="checkbox" disabled readOnly checked={item.done} />
<span className={item.done ? "done" : ""}>{item.text}</span>
</label>
</li>
))}
</ol>
</div>
)}
}
解决方案
如果您想像一些简单的 POJO 一样操作组件。
那么试试这个:
class Anchor extends React.Component {
render() {
return (
<div>
<h3>Name: {this.props.name}</h3>
</div>
);
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Hello',
items: [
{ text: 'Learn JavaScript', done: false },
{ text: 'Learn React', done: false },
{ text: 'Play around in JSFiddle', done: true },
{ text: 'Build something awesome', done: true }
]
};
}
addAnchor(){
const anchor = React.createElement('Anchor', { name: this.state.name }, '');
console.log(anchor.props.name);
}
render() {
return (
<div>
<h2>Todos:</h2>
<Anchor name={this.state.name} />
<ol>
{this.state.items.map(item => (
<li key={item.id}>
<label>
<input type="checkbox" disabled readOnly checked={item.done} />
<span className={item.done ? 'done' : ''}>{item.text}</span>
</label>
</li>
))}
</ol>
</div>
);
}
}
ReactDOM.render(<App />, document.querySelector("#app"))
我们必须以 React 的方式实例化一个 React 组件:
React.createElement('Anchor', { name: this.state.name }, ''); // <~~ like this
//var anchor = new Anchor('hello'); <~~ not like this
更多细节,你可以在这里阅读:React without JSX
希望这会有所帮助!
推荐阅读
- ruby - 我需要用 ah`ash 中的值替换数组中的哈希键
- azure-ad-b2c - Azure AD B2C - b2clogin 的示例代码模块
- html - 以不同的方式对具有相同类名的多个 div 进行样式设置
- assembly - 提示用户输入,计算字符串长度和重新打印输入
- python - 如何使用 python sympy 用 3 个方程求解 3 个未知数
- c# - 使用本地数据库时的 Entity Framework Core 错误
- r - 如何将数据从 mql4 (metatrader) 导入到 r 以实现自动化?
- architecture - cpu如何知道硬件中断?
- data-structures - 在左派堆树中,距离变量是通过以任何可能的方式最快地归零来计算的吗?
- python - 性能 Django/Python 调用模块