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を渡す必要があります。

名前は子供として渡すこともできますが、しかし、私はあなたが小道具としてそれを渡すことを学んでいると感じている。将来、あなたは子供を使うことができる。

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;