Question

我正在尝试将状态作为道具传递给另一个组件。子组件（页面上的按钮）未收到任何道具。我做了console.log来打印从父母那里收到的道具，但是得到了一个空对象{}。我在这里做错了什么？

这是我的代码的摘录：

loan.js（父母）

<ForecloseBtn id={this.state.lead_id} foreclose={this.state.isForeclosed } test="xyz"/>

ForecloseBtn.js（儿童）

    import React from 'react';
    import { render } from 'react-dom';

    class ForecloseBtn extends React.Component {
        constructor(props) {
            super(props);
            console.log(this.props);
            this.state = {
                lead_id: this.props.id,
                isForeclosed: this.props.foreclose,
                sample: this.props.test
            };
        }

        render() {

            return (
                ......
            )
        }
    };


    const App = () => (


        <ForecloseBtn />

    );

    export default App;

Answer 1

您必须添加像这样的propTypes

static propTypes = {    
id: object.isRequired,
foreclose: func.isRequired,        
}

当然

import {  
func, 
object,  
} from 'prop-types'

Answer 2

You can check my fiddle

Pass props to child

希望这会有所帮助。

状态未传递给子组件reactjs

2 个答案: