Question

这简化了我的问题.Child组件无法从Father获取道具。

Father.js：

import React from 'react';
import ReactDOM from 'react-dom';
import Child from './Child'

class Father extends React.Component {
    constructor(props) {
        super(props);
}

    render() {
        var data = "any data"
        return (
                <div>
                    <Child data={data}/>
                </div>
    );
}}

export default React.createClass({
  render() {
    return <Father/>
  }
})

Child.js：

import React from 'react';
import ReactDOM from 'react-dom';

class Child extends React.Component {
    constructor(props) {
        super(props);
        console.log(props)            // miss the value ,it return {}
    }

    render(){
        return <div>{this.props.data}</div>
    }
}


export default React.createClass({
  render() {
    return <Child/>             //  mark A
  }
})

在Child.construor，console.log(props)返回{}。在最后的网页中，什么也没有显示。

如何让Child组件从父亲那里获得道具？

如果我将mark A的行更改为

return <Child data= "any..data"/>

它会显示正确。有没有严格的规定？

Answer 1

你使事情复杂化。使用类方法创建组件时，不需要使用React.createClass。你所需要的只是

export default class Father extends React.Component {
    constructor(props) {
        super(props);
     }

    render() {
        var data = "any data"
        return (
                <div>
                    <Child data={data}/>
                </div>
        );
    }
}

和

import React from 'react';
import ReactDOM from 'react-dom';

export default class Child extends React.Component {
    constructor(props) {
        super(props);
        console.log(props)            // you will get the value here
    }

    render(){
        return <div>{this.props.data}</div>
    }
}

要了解问题所在，您需要知道您有一个中间类，它没有将数据从父级传递给子级。在下面的代码中

export default React.createClass({
  render() {
    console.log(this.props); // here you will see the props pass down from the parent
    return <Child/>   // here you are creating the instance of child component  but you are not passing any prop to it
  }
})

请注意，如果你写

export default React.createClass({
  render() {
    return <Child  {...this.props}/>   
  }
})

它可以工作，但您不需要它，因为您已经使用类方法

创建组件

React：不能将数据从父对象传递到子对象

1 个答案: