react 对象渲染_React动态渲染组件（对象分配与函数返回）

我在这里碰到了一堵砖墙，这意味着我无法完全弄清楚为什么接下来的两个版本的代码行为如此不同。React动态渲染组件(对象分配与函数返回)

在第一个版本，当我初始化一个this.childComponent = ()，其道具似乎并不当我改变了Parent的状态(通过setState())来更新。即使实际调用了setState()，并且Parent的状态已更新，也会发生这种情况。

在第二个版本中，当我实际初始化一个返回组件的函数(this.childComponent =() => {return ()})时，一切都像魅力一样工作，道具被更新。 我正在使用第二个版本(因为它的工作原理)，但我想了解为什么这个工程和第一个不工作。

这里的子组件：

class Child extends React.Component {

render() {

return (

{this.props.value}

)

}

}

我父组件的下两个版本：

class Parent extends React.Component {

constructor() {

this.state = {

value: 1

}

this.childComponent = (

setValue={() => this.setValue()}/>

)

}

setValue() {

this.setState({value: 2})

}

render() {

return ({this.childComponent})

}

}

2.(该this.childComponent是现在是一个返回反应元素的函数)

class Parent extends React.Component {

constructor() {

this.state = {

value: 1

}

this.childComponent =() => {

return (

setValue={() => this.setValue()}/>

)

}

}

setValue() {

this.setState({value: 2})

}

render() {

return ({this.childComponent()})

}

}

我试图简化代码，所以我的问题更容易理解。

预先感谢您

+1

在您的第一个(损坏的)版本中，子组件是静态定义的并且再也不会更改。 –

+1

您在第一种情况下没有返回'render(){ return {this.childComponent} }'否则可以使用子组件是静态的 –

+0

明白了，感谢您的解释 –