如何更改 React Js 中的道具值？答案

【问题标题】：How to Change Props value in React Js?如何更改 React Js 中的道具值？
【发布时间】：2019-10-21 12:39:48
【问题描述】：

以下是下面的代码，现在我想在同一个组件中更改 name 的值？我该如何做到这一点？？

render(){
return(
<div>
<p>{this.props.name}</p>
</div>
)
}

【问题讨论】：

从父组件更改。
你不能更新道具，因为那是只读的，但你可以像这样stackoverflow.com/a/58486735/6544460

标签： reactjs react-redux setstate react-props

【解决方案1】：

props 不应在 react 中更改，它们是 readonly。在父组件中更新它们，然后将它们作为新值传递。接收它们的组件应该只是显示它们，并且逻辑处理应该发生在更高级别

【讨论】：

【解决方案2】：

您不应该尝试直接在组件内部更新道具，但是您可以在该组件中触发一个事件，该事件将被父级捕获，该父级将该值作为道具传递给您的组件，然后父级组件将更新该值这将传递给所有接收该数据作为道具的 if child。

import { Component } from 'react';

class Child extends Component {
    render(){
        return(
            <div>
                <h2>{this.props.name}</h2>
                <button onClick={() => this.props.changeName("New name"); }>
                    Change Name
                </button>
            </div>
        )
    }
}

class Parent extends Component {
    constructor() {
        this.state = {
            name: "Name"
        }
    }
    handleChande (name) {
        this.setState({name: name});
    }

    render() {
        <div>
            <Child changeName={this.handleChange} />
        </div>
    }
}

【讨论】：

【解决方案3】：

您无法更改 props 的值，但您仍然可以选择更改可以使用的值。您有两个选择：要么从父组件更改它，要么使用 state 而不是 props。

选项 1/父更改：

const ParentComponent = props => {
  const [name, setName] = useState('')
  return (
    <div>
      <button onClick={() => setName('test')}>Test</button>
      <ChildComponent name={name} />
    </div>
  )
}

ChildComponent 有你的代码可以使用this.props.name。

选项 2/使用状态：

const MyComponent = props => {
  const [name, setName] = useState(props.name || '')
  return (
    {name}
  )
}

注意：这是未经测试的代码，用于显示不可复制粘贴的想法。

【讨论】：

【解决方案4】：

您可以像这样从不同的组件中实现这一点。

App.js

import React from "react";
import ChildComponent from "./ChildComponent";

class App extends React.Component {
  state = {
    name: ""
  };
  handleChane = e => {
    this.setState({ name: e.target.value });
  };
  render() {
    const { name } = this.state;
    return (
      <div>
        <ChildComponent name={name} handleChane={this.handleChane} />
      </div>
    );
  }
}

ChildComponent.js

import React from "react";

function ChildComponent(props) {
  return (
    <div>
      <input
        type="text"
        onChange={props.handleChane}
        placeholder="enter your name"
      />
      {props.name}
    </div>
  );
}
export default ChildComponent;

【讨论】：