gpt4 book ai didi

node.js - 在reactjs中将数据传递给子组件

转载 作者:行者123 更新时间:2023-12-03 13:56:58 25 4
gpt4 key购买 nike

我正在reactjs应用程序中工作。我想将数据传递给它的子组件。我将 Parent 作为父组件,将 Test1 和 Test2 作为其子组件。另外,我在父组件中拥有恒定的数据。我想在其所有子组件中传递相同的数据。如何在 Test1 组件中访问此数据父级代码

import React, {PropTypes} from 'react'; 
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {load} from 'redux/modules/viewlodging';
import Test1 from './Test1';
import Test2 from './Test2';
@connect(
state => ({data: state.viewlodging.data}),
dispatch => bindActionCreators({load}, dispatch))
export default class Viewlisting extends React.Component {
static propTypes = {
data: PropTypes.object,
load: PropTypes.func.isRequired
}
render() {
const {data} = this.props;
return (
<div>
<div className="row font14 relative">
<div className="container relative">
<div className="col-md-8">
<div className="row details">
<{data.title}>
</div>
</div>
<div className="col-md-4" >
<Test1/>
<Test2/>
</div>
</div>
</div>
</div>
);
}
}

在测试 1

import React from 'react';
export default class Test1 extends React.Component {
render() {
return (
<div className="summary-info">
<div>From Test1</div>
</div>
);
}
}

如何访问测试中的数据?

最佳答案

将其作为 props 传递,然后使用 this.props 访问它。

在你的父级中添加你想要传递的props:

<Test1 data={data}/>

让您的 child 使用 this.props 访问它:

<div className="summary-info">
<div>From Test1 - this is from parent {this.props.data}</div>
</div>

这是fiddle

关于node.js - 在reactjs中将数据传递给子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40974240/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com