как получить доступ к данным из дочерних тегов в реакции - PullRequest
Новая
       81

как получить доступ к данным из дочерних тегов в реакции

1 голос
/ 03 апреля 2020

Я пытаюсь убедиться, что мои собственные родительские компоненты могут иметь доступ к любым дочерним компонентам внутри них. Я пытаюсь выполнить sh настройку, похожую на: 

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

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

    </div>
  );
}

Я хотел бы иметь возможность получить данные из моего тега img в мои родительские и, возможно, даже удалить тег img от родителя на крючке. Я не уверен, лучше ли это обрабатывать с использованием компонентов более высокого порядка?

Есть ли способ настроить мой родительский компонент таким образом, чтобы он предполагал, что все, что обернуто внутри него, является дочерним и может читать все данные этот ребенок?

Любой совет по изложению того, как эти отношения должны работать, очень ценится:)

Ответы [ 2 ]

1 голос
/ 03 апреля 2020

В React вы можете либо:

1 - передать переменные в качестве подпорок, чтобы дать вашим дочерним компонентам знать это значение, объявленное выше.

2 - передать методы в качестве подпорок, которые устанавливают состояние значение в родительском компоненте для передачи дочернего значения выше

Это два основных c способа взаимодействия компонентов. Невозможно передать дочернее значение родительскому значению, не объявив состояние родительского элемента и не предоставив дочернему элементу метод для его обновления.

Если вы не хотите передавать значения полностью вниз, но даже хотя вы хотите, чтобы все дети знали о чем-то, лучший подход IMHO - это использование Context API и хуков . В вашем примере это будет выглядеть так: 

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} />
  )

}

Каждый дочерний компонент <ImgContext.Provider />, использующий useContext, имеет доступ к value реквизиту, переданному провайдеру

0 голосов
/ 03 апреля 2020

Я рекомендую вам взглянуть на React.context (https://reactjs.org/docs/context.html), вы многому научитесь.

Вот как я думаю, вам нужно будет обработать: создайте пользовательский компонент Parent с привязанным к нему контекстом, затем создайте функцию, которая сможет генерировать ваш список img тегов, и функция для их изменения (removeImage(), updateImage(), getImage(), ..).

  1. Создайте свой собственный контекст: 
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, который напрямую изменит ваш рендер списка изображений.

Надежда это то, что вы просили;)

...