我们可以在 React 中将 props 从 Parent 传递给 Child 组件，并将 props 设置为子组件的 state 吗？

Question

const Parent=()=>{ return( ) }

const Child=({data})=>{ return ( {data} ) }

我可以将 Child 组件中的道具设置为其 state 吗？

Answer 1

是的你可以。 就像是：

class Child extends Component {
  constructor(props){
  const {myProp} = props;
  this.state = {myNumber: myProp}

  render(){
  const {myNumber} = this.state;
  return <div>{myNumber}</div>
}

class Parent extends Component {
  render () {
  return <Child myProp={5} />
  }
}

但是：如果您的“父”组件刷新，子组件也会刷新，并且 state 将恢复为父组件设置的值，并且您对子组件所做的所有 state 更改都将丢失。

Answer 2

是的，这里做了一个代码沙箱示例，展示了如何做到这一点： https://codesandbox.io/s/stack-pass-props-fgq67n

子组件看起来像这样

const Input = ({ string }) => {
  const [value, setValue] = useState(string);

  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
};

父组件：

export default function App() {
  return (
    <div className="App">
      <Input string="default" />
    </div>
  );
}

有时如果父级重新加载传递的道具可能会重置为默认值

Answer 3

React 中有一个概念被称为受控组件和不受控组件，当你的组件只有 props 并且内部没有 state 时，它就是一个受控组件，由父组件控制。

此外，不建议将 props 转换为子组件的 state，如果要更改 props 的值，只需传递一个附加方法作为 props 将由 Child 调用以更新道具，举个例子

const Parent = () => {
   const [number, setNumber] = useState(0);
   const updateNumberHandler = (numberToUpdate) => setNumber(numberToUpdate)
   return <Child number={number} onUpdateNumber={updateNumberHandler} />
}


const Child = (props) => {
  const { number, onUpdateNumber } = props;
  return <button onClick={() => onUpdateNumber(number + 1)}>Updated Number: {number}</button>
}

在这里您可以看到我传递了两个道具一个值和一个方法来更新该值，当调用 onUpdateNumber 方法时，父级上的值被更新，因此它被重新渲染，并且子级也使用更新后的数字重新渲染价值。