如何与React中的无状态组件通信？

Question

我想创建一个包含按钮的非常简单的应用程序。 当我单击它时，应更改其名称，并将其状态更改为： isDisabled:true 。 我通过内联编写按钮，给它一个OnClick等来完成此操作，但是我想使用具有相同功能的无状态组件来尝试此操作，但是我完全陷入了困境。

import React, { Component } from 'react';
import './App.css';


class App extends Component{
 constructor(){
   super()
   this.state = {name:'Hey buddy click me',
   isDisabled:false,
  }
 }

  render() {
    return (
      <div>
       <MyButton handleClick={this.handleClick.bind(this)}></MyButton>
       </div>
    )
  }
  handleClick = () => {
    this.setState ({
      name:'Dont click!',
      isDisabled:true,
  });

  }
}

const MyButton = (name, isDisabled) => <button onClick={this.handleClick.bind(this)}>{name}</button>

export default App;

Answer 1

如果要访问MyButton组件，则还需要使用handleClick作为道具传递name, isDisabled 。

虽然名字也可以像孩子一样被传递。 但据我所知，您正在学习开始将其作为道具来使用，然后将来可以使用儿童。

import React, { Component } from 'react';
import './App.css';


class App extends Component{
 constructor(){
   super()
   this.state = {name:'Hey buddy click me',
   isDisabled:false,
  }
 }

  render() {
    return (
      <div>
       <MyButton
         name={this.state.name}
         isDisabled={this.state.isDisabled}
         handleClick={this.handleClick.bind(this)}>
       </MyButton>
      </div>
    )
  }
  handleClick = () => {
    this.setState ({
      name:'Dont click!',
      isDisabled:true,
  });

  }
}
//here we need to receive props from parent components, if we need to use here
const MyButton = ({name, isDisabled, handleClick}) => <button onClick={handleClick}>{name}</button>

export default App;