如何更改从没有状态的父级传递的子组件值

Question

我解决不了这个案子。来自父母  <ChildDiv  key={el} width={i} value={' '}></ChildDiv>来自孩子  <MyContext.Consumer>      {context => (        <div onClick={() => test(value, context.ChangeTurn)} className="row">   </div>  )} </MyContext.Consumer>   let test = (value, context) => {if (value !== "X" && val !== "O") {  value = "laslda"; }};所以我想改变本地函数的值。

Answer 1

如果希望上下文消费者能够更新上下文，最好在上下文中公开一个方法来执行更新；然后组件提供者可以将新的上下文对象传递给消费者，从而引发重新渲染。

下面是代码的样子：

上下文（./context.js）：

import { createContext } from 'react';

const Context = createContext({ value: null, setValue: () => {} });

export default Context;

提供者 ( ./provider.js):

import { useState } from 'react';

import Context from './context';

const Provider = ({ value: startingValue, children }) => {

  const [value, setValue] = useState(startingValue);

  return (

    <Context.Provider value={{ value, setValue }}>

      {children}

    </Context.Provider>

  );

};

样本消费者 ( ./consumer.js)：

import Context from './context';

export default Context.Consumer; 

现在您可以在根目录 ( ./app.js) 执行此操作：

import Provider from './provider';

import ChildComponent from './child-component';

export default function App() {

  return (

    <Provider value={0}>

      <ChildComponent/>

    </Provider>

  );

}

...这在子组件中（使用钩子，./child-component.js）：

import { useContext } from 'react';

import Context from './context';

export default function ChildComponent() {

  const { value, setValue } = useContext(Context);

  return (

    <div>

      <h1>Counter: {value}</h1>

      <button onClick={e => { e.preventDefault(); setValue(value - 1) }}>-</button>

      <button onClick={e => { e.preventDefault(); setValue(value + 1) }}>+</button>

    </div>

  );

}

...或没有钩子：

import React from 'react';

import Consumer from './consumer';

export default function ChildComponent() {

  return (

    <Consumer>

      ({ value, setValue }) => (

        <div>

          <h1>Counter: {value}</h1>

          <button onClick={e => { e.preventDefault(); setValue(value - 1) }}>-</button>

          <button onClick={e => { e.preventDefault(); setValue(value + 1) }}>+</button>

        </div>

      );

    </Consumer>

  );

}

Answer 2

value在反应中，像你传递的道具是Read-Only。

请记住，道具是只读的。不应以任何方式修改它们。

您可能需要提供一个 setter：

<MyContext.Provider value={{ dispatch: this.setState }}>

  <ChildDiv key={el} width={i} value={value}></ChildDiv>

</MyContext.Provider>

<MyContext.Consumer>

  {({ dispatch }) => (

    <button onClick={() => dispatch({value: 'New Value'})}>Button</button>

  )}

</MyContext.Consumer>