将数据传递给 reactjs 中的子组件

Question

我正在使用 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>
    );
 }
 }

如何访问Test中的数据？

Answer 1

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

在您的父母中添加您要传递的props：

<Test1 data={data}/>

在您的孩子中使用this.props 访问它：

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

这里是fiddle