是否可以动态处理作为道具传递给组件的值？

Question

I am new to React and I am trying to understand the following basic:

Is it possible to manipulate a value that is passed to a component as props dynamically? Eg trough the console on the client? Will that lead to a rerender of the component?

I know that it is possible to pass a value to a child component from its parent, and as soon as the parent rerenders, the child component is rerendered as well with the new value.

But can you achieve the same behaviour by somehow manipulate the passed value directly? eg

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

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

Output is: Hello, Sara

I want to achieve something like this, without using a parent element:

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

Output is: "test"

Now if I set name in console to name = "X" it changes nothing, name seems to be a completely different variable.

Answer 1

To answer your question: inputing variable changes in the console (let's assume you are using chrome dev tools) will NOT affect the reactjs code you have written.

If you are changing the variable at the console level once the page has loaded, then the original variable "name" will have already rendered with the assigned value of "test".