Question

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

Child.js

App.js

import React from 'react';

const Child = (props) =>{
    <div>
        <button onClick={props.doWhatever}>{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 { 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 组件时。

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;

Child（...）：渲染未返回任何内容。这通常意味着缺少return语句。或者，不渲染任何内容，则返回null

1 个答案: