如何在 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 组件中访问，你也需要将name, isDisabled 和handleClick 作为道具传递。

虽然 name 也可以作为子级传递。但是我觉得你正在学习开始将它作为道具传递。那么将来你可以使用孩子。

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;