Reactの3つの主要属性におけるpropsの使用の詳細な説明

//親コンポーネントの値を渡すクラス Father extends React.PureComponent{
    与える（）{
        戻る （
            <息子値={"息子"} />
        ）
    }
}

クラスSonはReact.PureComponentを拡張します{
    与える（）{
        戻る （
            <div>このデータは {this.props.value} です</div>
        ）
    }
}

関数Fa(){
    戻る （
        <息子値={"息子"} />
    ）
}

関数Son(props){
    戻る （
        <div>このデータは {props.value} です</div>
    ）
}

// 親コンポーネントから子コンポーネントに値を渡すことについては既に説明しました。次に、子コンポーネントが親コンポーネントに値を渡す方法をまとめます。このとき、親コンポーネントは最初に子コンポーネントに props 関数を渡す必要があることがよくあります。子コンポーネントは渡された関数を呼び出して親コンポーネントの値を変更します export default class Fa extends Component {
    状態 = {faValue:'Fa1'}

    changeFa = (値)=>{
        this.setState(()=>{
            {faValue:値}を返す
        })
    }
    与える（） {
        戻る （
            <>
                <h1>Fa の値は {this.state.faValue}</h1> です
                <Son changeFa={this.changeFa}/>
            </>
        ）
    }
}

デフォルトのクラスSonをエクスポートしてReact.PureComponentを拡張します{

    変更値 = ()=>{
        this.props.changeFa(this.inputRef.value)
    }
    与える（） {
        戻る （
            <>
                <input type="text" placeholder={"値を入力してください"} ref={(el)=>{this.inputRef = el}}/>
                <button onClick={this.changeValue}>変更</button>
            </>
        ）
    }
}

関数Fa(){
    const [faValue,setFaValue] = useState("Fa1")

    const changeFa = (値)=>{
        setFaValue(値)
    }
    戻る （
        <div>
            <h1>Fa の値は {faValue}</h1> です
            <息子 changeFa={changeFa} />
        </div>
    ）
}

関数Son(props){
    定数 inputValue = useRef("")
        //faコンポーネントの値を変更する関数を定義します。const changeFaValue = ()=>{
            props.changeFa(入力値の現在の値)
        }
        戻る （
            <>
                <input type="text" placeholder={"変更したい値を入力してください"} ref={inputValue}/>
                <button onClick={changeFaValue}>値を変更</button>
            </>
        ）
}

// たとえば、前の入力ケースでは、brother コンポーネントに値を渡す必要があります。props を使用しない場合、Bro はどのように記述すればよいでしょうか。
デフォルトクラス Bro をエクスポートして Component を拡張します {

    コンポーネントマウント() {
        this.sonData = PubSub.subscribe("brother",(msg,data)=>{
            console.log("Bro コンポーネントがメッセージを受信しました",data);
        })
    }

    コンポーネントのマウントを解除します（）{
        PubSub.unsubscribe(this.sonData)
    }

    与える（） {
        戻る （
            <>
                <div>兄弟</div>
            </>
        ）
    }
}
息子：
デフォルトのクラスSonをエクスポートしてReact.PureComponentを拡張します{

    変更値 = ()=>{
        PubSub.publish("brother",this.inputRef.value)
    }

    与える（） {
        戻る （
            <>
                <input type="text" placeholder={"値を入力してください"} ref={(el)=>{this.inputRef = el}}/>
                <button onClick={this.changeValue}>変更</button>
            </>
        ）
    }
}