コンポーネントにPropsとして動的に渡される値を操作することは可能ですか？

Question

私はReactを初めて使用しており、次の基本を理解しようとしています。

コンポーネントにプロンプ​​トとして動的に渡される値を操作することは可能ですか？例えば。クライアント上のコンソールから？それはコンポーネントの再レンダリングにつながるでしょうか？

親から子コンポーネントに値を渡すことができ、親が再レンダリングするとすぐに、子コンポーネントも新しい値で再レンダリングされます。

しかし、あなたは何らかの方法で渡された値を直接操作できますか？例：

function Welcome(props) { 
    return <h1>Hello, {props.name}</h1>; 
} 

ReactDOM.render(
    <Welcome name="Sara" />, 
    document.getElementById('root') 
); 

出力は次のとおりです。 こんにちは、サラ

私は親要素を使用せずに、このような何かを達成したい：

function Welcome(props) { 
    return <h1>Hello, {props.name}</h1>; 
} 
var name = "test"; 
ReactDOM.render(
    <Welcome name={name} />, 
    document.getElementById('root') 
); 

出力は次のとおりです。今、 "テスト"

name = "X"にコンソールで名前を設定すると、名前はまったく変わりません。名前はまったく異なる変数のようです。

Answer 1

あなたの質問に答えてください：コンソールに変数の変更を入力すると（あなたがchromeの開発ツールを使用していると仮定します）、あなたが書いたreactjsコードには影響しません。

ページがロードされた後にコンソールレベルで変数を変更する場合、元の変数 "name"は既に "test"という割り当て値でレンダリングされています。