如何与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

您需要与​​通过name, isDisabled过的道具，如果你想获得再MyButton组件。

虽然名字也可以作为孩子传递。但是，当我觉得你正在学习开始传递它作为道具。然后在将来你可以使用孩子。

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;