从父级检索子组件中的数据

Question

我有一个牵引3个孩子的父组件。我已使用axios将外部数据调用设置为父级的状态。

我目前遇到的问题是，我在子组件上使用什么语法从父组件中提取状态数据？

var Component_1 = React.createClass({

render(){
    return(
        <div className="col-sm-4">
            <div className="col-sm-12">
                <h5>Component 1</h5>
                <div className="col-sm-12">
                    <svg className="svg_test"></svg>
                </div>
            </div>
            <div className="col-sm-12">
                <h5>"state data goes here?"</h5>
                <h6>Component 1</h6>
            </div>
        </div>
        );
    }
});

var Component_2 = React.createClass({

render(){
    return(
        <div className="col-sm-4">
            <div className="col-sm-12">
                <h5>Component 2</h5>
                <div className="col-sm-12">
                    <svg className="svg_test"></svg>
                </div>
            </div>
            <div className="col-sm-12">
                <h5>"state data goes here?"</h5>
                <h6>Component 2</h6>
            </div>
        </div>
        );
    }
});


var Component_3 = React.createClass({

render(){
    return(
        <div className="col-sm-4">
            <div className="col-sm-12">
                <h5>Component 3</h5>
                <div className="col-sm-12">
                    <svg className="svg_test"></svg>
                </div>
            </div>
            <div className="col-sm-12">
                <h5>"state data goes here?"</h5>
                <h6>Component 3</h6>
            </div>
        </div>
        );
    }
});



var Parent_Component = React.createClass({

getInitialState: function(){
    return{
        data: []
    }
},

componentDidMount: function(){
    var _this = this;
    this.serverRequest = axios.get("external data call").then(function(result){
        _this.setState({
            data: result.data
        });
    })
},

componentWillUnmount: function(){
    this.serverRequest.abort();
},

render() {
    return (
        <div className="col-sm-12">
            <Component_1></Component_1>
            <Component_2></Component_2>
            <Component_3></Component_3>
        </div>
    );

}
});

ReactDOM.render(<Parent_Component />,
document.getElementById("component"))

Answer 1

发送道具？

var Component_1 = React.createClass({

render(){
    console.log(this.props.data)
    return(
        <div className="col-sm-4">
            <div className="col-sm-12">
                <h5>Component 1</h5>
                <div className="col-sm-12">
                    <svg className="svg_test"></svg>
                </div>
            </div>
            <div className="col-sm-12">
                <h5>"state data goes here?"</h5>
                <h6>Component 1</h6>
            </div>
        </div>
        );
    }
});

var Component_2 = React.createClass({

render(){
    console.log(this.props.data)
    return(
        <div className="col-sm-4">
            <div className="col-sm-12">
                <h5>Component 2</h5>
                <div className="col-sm-12">
                    <svg className="svg_test"></svg>
                </div>
            </div>
            <div className="col-sm-12">
                <h5>"state data goes here?"</h5>
                <h6>Component 2</h6>
            </div>
        </div>
        );
    }
});


var Component_3 = React.createClass({

render(){
    console.log(this.props.data)
    return(
        <div className="col-sm-4">
            <div className="col-sm-12">
                <h5>Component 3</h5>
                <div className="col-sm-12">
                    <svg className="svg_test"></svg>
                </div>
            </div>
            <div className="col-sm-12">
                <h5>"state data goes here?"</h5>
                <h6>Component 3</h6>
            </div>
        </div>
        );
    }
});



var Parent_Component = React.createClass({

getInitialState: function(){
    return{
        data: []
    }
},

componentDidMount: function(){
    var _this = this;
    this.serverRequest = axios.get("external data call").then(function(result){
        _this.setState({
            data: result.data
        });
    })
},

componentWillUnmount: function(){
    this.serverRequest.abort();
},

render() {
    return (
        <div className="col-sm-12">
            <Component_1 data={this.state.data}></Component_1>
            <Component_2 data={this.state.data}></Component_2>
            <Component_3 data={this.state.data}></Component_3>
        </div>
    );

}
});

ReactDOM.render(<Parent_Component />,
document.getElementById("component"))

如果你想让这些数据处于子状态，你可以创建可状态子组件并在构造函数中设置。

class Component_1 extends React.Component{
    constructor(){
        super()
        this.state={
            data: this.props.data
        }
    }
    redner() ....