如何从反应中的子标签访问数据

Question

我试图确保我的自定义父组件可以访问其中的任何子组件。我正在尝试完成类似于以下的设置：

function App() {
  return (
    <div className="App">

      <Parent>
          <img src={spaceGasImg} height='100px' width='100px'></img>
      </Parent>

    </div>
  );
}

我希望能够从我的 img 标签中获取数据到我的父级中，甚至可能能够通过挂钩从父级中删除 img 标签。我不确定这是否最好通过使用高阶组件来处理？

有没有办法设置我的父组件，使其假定包裹在其中的任何东西都是一个子组件，并且可以读取该子组件的所有数据？

非常感谢您提出任何关于如何建立这种关系的建议:)

Answer 1

我会推荐你看看React.context（https://reactjs.org/docs/context.html），你会学到很多东西。

以下是我认为您需要处理的方式：创建一个自定义 Parent 组件，并附加上下文，然后创建能够生成 img 标签列表的函数，以及更改它们的函数（removeImage()、updateImage(), getImage(), ..).

创建您自己的上下文：

const MyContext = React.createContext(defaultValue);

创建您的父状态：

this.state = {
  images: [
      {
        id: 1
        url:'url1',
        height: '400px',
        width: '400px'
      }, 
      {
        id: 2
        url:'url2',
        height: '400px',
        width: '400px'
      }
    ]
  }
}

创建您的父组件：

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.removeImage = (id) => {
      // write the function to remove image from this.state.images array using id
    }
    this.getImage = (id) => {
      // write the function to get image from this.state.images array using id 
    }
    this.state = {/* past step 2 here */}
  }

  render() {
    return (
      <div>
        <MyContext.Provider value={this.state}>
          <MyContext.Consumer>
            {({images}) => (
              <div className="list-image">
                {images.map((img) => {
                    return (<img 
                              imgId={img.id} 
                              src={img.url} 
                              height={img.height} 
                              width={img.width} alt="nothing"
                            />);
                  }
                }
              </div>
            }}
          </MyContext.Consumer>
        </MyContext.Provider>
      </div>
    );
  }

这样您就可以更改 this.state.imgaes 列表，这将直接更改您的图像渲染列表。

希望这就是您所要求的 ;)

Answer 2

在 React 中，您可以：

1 - 将变量作为道具向下传递，让您的 child 组件知道上面声明的这个值。

2 - 将方法作为道具向下传递，在 parent 组件上设置状态值以传递 child 上面的值

这是组件通信的两种基本方式。如果不在 parent 上声明状态并向 child 提供更新它的方法，则无法与 parent 共享 child 值。

如果您不想一直向下传递值，但即使您希望所有 children 都知道某些事情，恕我直言，最好的方法是使用 Context API 和 Hooks。在你的例子中它会是这样的：

const ImgContext = React.createContext()

function App() {
  return (
    <div className="App">

    <ImgContext.Provider value={spaceGasImg}> // the name of this prop MUST be 'value'
      <Parent> 
        <Child />
      </Parent>
    </ImgContext.Provider>

    </div>
  );
}

function Child() {
  // Every component inside the Provider will have the value available in the 
  // useContext hook with the context as a parameter. 

  const contextValue = useContext(ImgContext) // spaceGasImg

  return (
    <img src={contextValue} />
  )

}

使用 useContext 的 <ImgContext.Provider /> 的每个 child 组件都可以访问提供者

上传递的 value 道具

如何从反应中的子标签访问数据

how to access data from child tags in react

children

reactjs

react-props