我有两个组件。第一个状态已初始化:
import React from 'react';
class One extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 'hi'
}
}
render() {
return (
<div prop={this.state.data}>{this.state.data}</div>
);
}
}
export default One;
import React from 'react';
class Two extends React.Component {
render() {
return (
<div>{this.prop}</div>
);
}
}
export default Two;
第一个组件打印出数据的状态。我如何将该值作为只读值传递到我的第二个组件中并呈现它?
要在第二个组件中传递值,您必须首先将其导入到第一个组件中并将该值作为 prop 传递。
例如,您的代码可能如下所示:
import React from 'react';
import Two from './Two' // I am assuming One.js and Two.js are in same folder.
class One extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 'hi'
}
}
render() {
return (
<div>
<div>{this.state.data}</div>
<Two value={this.state.data} />
</div>
);
}
}
export default One;
然后在Two.js
您可以按如下方式访问该值:
import React from 'react';
class Two extends React.Component {
render() {
return (
<div>{this.props.value}</div>
);
}
}
export default Two;
现在,假设您正在使用您的组件One
in App
或任何地方。每当你会使用<One/>
您将在浏览器中看到以下内容:
hi
hi
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)