父组件未将prop传递给子组件

Question

So in my Parent component's render function I have:

const BasicDetails = React.createClass({
    propTypes: {
        showFxMargin: bool
    },

    getDefaultProps() {
        return {
            showFxMargin: false
        };
    },
    render() {
        return(
        // other stuff...
        console.log('inside BasicDetails.jsx showFxMargin = ' + showFxMargin);
        <FxMargin
            showFxMargin={showFxMargin}
        />);
    }
 });

and in the child component I have:

import _ from 'lodash';
import React from 'react';

const FxMargin = React.createClass({
    render() {
        const {
            showFxMargin
        } = this.props;
        console.log('inside FxMargin.jsx showFxMargin = ' + showFxMargin);
        return showFxMargin ? (
            <div>
                <h1>FX Margin Baby</h1>
            </div>
        ) : (
            <p></p>
        );
    }
});

export default FxMargin;

In my console I'm getting:

inside BasicDetails.jsx showFxMargin = true 

and inside BasicDetails.jsx showFxMargin = false

But I never get:

inside FxMargin.jsx showFxMargin = true

How am I passing the prop incorrectly? I'm not getting any errors

Answer 1

Your render() function inside of your BasicDetails component contains a console.log statement inside the return. If this is the exact code that you're trying to use, then that is why your components aren't rendering correctly.

With that line removed, your code works just fine: http://jsbin.com/jozewoxubu/edit?js,output

Answer 2

make the render method of BasicDetails component either -

render() {
    const {showFxMargin} = this.props; //change
    console.log('inside BasicDetails.jsx showFxMargin = ' + showFxMargin);
    return(
    // other stuff...

    <FxMargin
        showFxMargin={showFxMargin}
    />);
}

Or -

render() {
    console.log('inside BasicDetails.jsx showFxMargin = ' + this.props.showFxMargin); //change
    return(
    // other stuff...

    <FxMargin
        showFxMargin={this.props.showFxMargin} //change
    />);
}

Hope this solves!