React 通过 props 传递函数的问题

class Parent extends Component {
    constructor(props) {
    	super(props);
    	this.state = { "id": "1" };
    }
    
    setIdFromChildA = (id) => this.setState({ "id": id });
    setIdFromChildB = (id) => this.setState({ "id": id });
    
    render() {
    	return (
    	    <ChildA id={this.state.id} setId={this.setIdFromChildA} />
    	    <ChildB id={this.state.id} setId={this.setIdFromChildB} />
        );
    }
}

class ChildA extends Component {
	constructor(props) {
    	super(props);
    	this.state = {...};
    }
    
    componentDidMount() {
    	this.foo()
    }
    
    foo() {
    	this.props.setId("2");
    }
}

class ChildB extends Component {
    constructor(props) {
    	super(props);
    	this.state = {...};
    }
    
    handleClick = (e) => {this.props.setId("2")};
    
    render() {
    	return (
            <button type="button" onClick={this.handleClick} />
    	);
}

现在的问题是 ChildA 调用 setId 没有问题但是 ChildB 在调用时会报错TypeError: _this.props.setId is not a function。A 和 B 的区别在于一个是在componentDidMount()中执行另一个是 onClick 事件触发，是因为这个原因吗？