Блог

Я новичок в том, чтобы реагировать. У меня есть ширина и высота a lt;Viewgt; , и я хотел бы передать эти данные в lt;Childgt; компонент, содержащий эти два реквизита. Я должен деструктурировать lt;Viewgt; макет по ширине и высоте, но, похоже, я не могу передать эти переменные в lt;Childgt; (неопределенное имя).

Вот код:

 lt;View onLayout={(event) =gt; { let { width, height } = event.nativeEvent.layout;}} gt;  lt;Child width={width} height={height } /gt;  lt;/Viewgt;  

Спасибо

Альтернативное решение с помощью крючка useState:

 export default function App() {   const [width, setWidth] = useState(0);  const [height, setHeight] = useState(0);   return (  lt;View onLayout={(event) =gt; {  let { width, height } = event.nativeEvent.layout  setWidth(width); setHeight(height);  }}gt;  lt;Child width={width} height={height} /gt;  lt;/Viewgt;  ); }  

Если вы обратите внимание на свой код, вы увидите, что width он height не входит в область действия. Они существуют в области действия вашего обработчика событий. Следовательно, вы передаете ребенку переменные, которых не существует.

Кроме того, правильным способом сделать это было бы использование государства. Например, если ваше представление создано в классе с именем AppView , то

 class AppView extends React.Component {  constructor(props) {  super(props)  this.state = {  width: null,  height: null,  }  }  render() {  return (  lt;View onLayout={(event) =gt; {  let { width, height } = event.nativeEvent.layout  this.setState({width: width, height: height}  }}gt;  lt;Child width={this.state.width} height={this.state.height} /gt;  lt;/Viewgt;  )  } }  

Таким образом, каждый onLayout раз, когда событие запускается, оно устанавливает переменные состояния width и height . Эти измененные значения затем будут переданы дочернему элементу.