函数作为 React 子函数无效。如果从渲染返回组件而不是<组件 />，则可能会发生这种情况

Question

这是我在React.js中创建第一个项目时遇到的错误，它只是一个便签应用程序。整个警告显示如下：

printWarning    @   react-dom.development.js:61
error   @   react-dom.development.js:37
warnOnFunctionType  @   react-dom.development.js:13277
reconcileChildFibers    @   react-dom.development.js:14168
reconcileChildren   @   react-dom.development.js:17020
finishClassComponent    @   react-dom.development.js:17541
updateClassComponent    @   react-dom.development.js:17465
beginWork   @   react-dom.development.js:19103
beginWork$1 @   react-dom.development.js:23970
performUnitOfWork   @   react-dom.development.js:22809
workLoopSync    @   react-dom.development.js:22737
renderRootSync  @   react-dom.development.js:22700
performSyncWorkOnRoot   @   react-dom.development.js:22323
scheduleUpdateOnFiber   @   react-dom.development.js:21911
updateContainer @   react-dom.development.js:25512
(anonymous) @   react-dom.development.js:26051
unbatchedUpdates    @   react-dom.development.js:22461
legacyRenderSubtreeIntoContainer    @   react-dom.development.js:26050
render  @   react-dom.development.js:26133
(anonymous) @   Inline Babel script:57
hq  @   babel.min.js:1
a   @   babel.min.js:1
yq  @   babel.min.js:1
(anonymous) @   babel.min.js:1
Cq  @   babel.min.js:1
kq  @   babel.min.js:1

同时，我的代码是这样的：

.note {
width: 250px;
height: 150px;
background-color: yellow;
padding: 15px;
border: 1px solid orange;
box-shadow: 2px 6px 12px rgba(0,0,0,0.2);
}

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
class Note extends React.Component {
constructor(props) {
super(props);
this.state = {
editing: false
}
}

edit = () => { 
this.setState = ({editing: true})
}
save = () => {
var val = this.refs.newText.value
alert( "The value will be stored as " + val)
this.setState = ({editing: false})
}
delete() {
alert( 'Deleting' )
}
renderForm = () => {
return (
<div class="note">
<textarea ref="newText"></textarea>
<button onClick={this.save}>Save</button>
</div>
)
}
renderDisplay = () => {
return(  
<div className="note"> 
<p>{this.props.children}</p>
<span>
<button onClick={this.edit}>Edit</button>
<button onClick={this.delete}>X</button>
</span>
</div>
)
}
render() { 
if(this.state.editing) {
return this.renderForm
} else {
return this.renderDisplay
}
}
}
ReactDOM.render(<Note>Hello World!</Note>, document.getElementById('react-container'))
</script>

有人能帮我纠正吗？我的页面是空白的，无法显示备注。

我应该可以看到一个黄色的应用程序，它可以让我保存笔记。

Answer 1

问题出在您的render方法上，请记住render应该始终返回组件，您只是返回对函数的引用，所以接下来您应该调用类似的函数

render() { 
if(this.state.editing) {
return this.renderForm()
} else {
return this.renderDisplay()
}
}