React js从子组件到母组件接收道具

Question

让，我们有一个这样的父组件，

import React from 'react';

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

    render() {
        return (
            <div className='padding'>
                {this.props.children}
            </div>
        );
    }
}

好的，现在我想像这样使用这个组件

<ParentComp fillbg="#389457">
      content goes here.......
</ParentComp>

需要在父组件中更改什么才能应用该背景（fillbg）

Answer 1

import React from 'react'

export default const ParentComp = ({children, fillbg}) => (
    <div className='padding' style={{backgroundColor: fillbg}}>
        {children}
    </div>
);

Answer 2

将它作为道具传递给您的组件并使用它

import React from 'react';

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

    render() {
        return (
            <div className='padding' style={{backgroundColor: this.props.fillbg}}>
                {this.props.children}
            </div>
        );
    }
}

像这样传递 fillbg 道具

<ParentComp fillbg="#389457">
      content goes here.......
</ParentComp>