Child(...)：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null

Question

我有两个 js 文件 Child.js 和 App.js。

Child.js

import React from 'react';

const Child = (props) =>{
    <div>
        <button onClick={props.doWhatever}>{props.title}</button>
    </div>

}
export default Child;

App.js

import React, { Component } from 'react';
import './App.css';
import Child from './components/parentTochild/Child.js'

class App extends Component {
  state = {
    title : 'Helloooo'
  }

  changeWorld = (newTitle) => {
    this.setState = ({
      title : newTitle
    });
  }

  render() {
    return (
      <div className="App">
        <Child doWhatever={this.changeWorld.bind(this , 'New world')} title={this.state.title}/>
      </div>
    );
  }
}
export default App;

在执行此代码时，我收到了标题中提到的错误。我试图解决它。但我无法弄清楚这段代码有什么问题。

当我删除 <Child doWhatever={this.changeWorld.bind(this , 'New world')} title={this.state.title}/> 并键入它显示在屏幕上的文本时。问题在于使用 Child 组件时。

Answer 1

你应该从子组件返回一些东西。

import React from 'react';

const Child = (props) =>{
    return (
          <div>
               <button onClick={(event)=>props.doWhatever('New world')}>{props.title}</button>
          </div>
    );

}
export default Child;

更新：

如果您想通过事件处理程序向您发送文本，可以这样做：

import React, { Component } from 'react';
import './App.css';
import Child from './components/parentTochild/Child.js'

class App extends Component {
  constructor(props){
      super(props);
      this.state={
          title : 'Helloooo'
      };
      this.changeWorld=this.changeWorld.bind(this);
  }

  changeWorld = (newTitle) => {
    this.setState = ({
      title : newTitle
    });
  }

  render() {
    return (
      <div className="App">
        <Child doWhatever={this.changeWorld} title={this.state.title}/>
      </div>
    );
  }
}
export default App;