Блог

Главная - Вопросы по программированию - Как отправлять значения без перехода к дочернему компоненту

Как отправлять значения без перехода к дочернему компоненту

#reactjs #react-native #expo

Вопрос:

доброе утро

Я хотел отправить некоторые данные массива дочернему компоненту , цель этого компонента-сократить мой код на одну страницу

эту страницу я назвал домашней страницей, внутри домашней страницы есть несколько диаграмм

 import Chart01 from ../components/chart01
import Chart02 from ../components/chart02
import Chart03 from ../components/chart03

и на этой домашней странице будут кнопки, которые (я планирую) отправят значение на эти 3 диаграммы

 const [FirstValue,setFirstValue] = useState(0)

return(
<View>
  <View>
     <Button onPress={()=>setFirstValue(1)}
     <Button onPress={()=>setFirstValue(2)}
     <Button onPress={()=>setFirstValue(3)}
  </View>
  <Chart01/>
  <Chart02/>
  <Chart03/>
</View>
)

Как отправить значение First с домашней страницы на Chart01 Chart02 Chart03 ?

и в Chart01, как я могу назвать значение, отправленное с домашней страницы ?

Спасибо

Ответ №1:

В доме у вас есть пропуск, как показано ниже,

 <Chart01 value={FirstValue}/>
<Chart02 value={FirstValue}/>
<Chart03 value={FirstValue}/>

В определении Chart01,02,03 вы должны прочитать реквизиты.

 const Chart01 = (props) => {
  const { value } = props;
  // someting
};

Ответ №2:

Передайте значения в качестве реквизитов компонентам диаграммы.

 const [firstValue, setFirstValue] = useState(0);


return(
  <View>
    <View>
      <Button onPress={() => setFirstValue(1)}
      <Button onPress={() => setFirstValue(2)}
      <Button onPress={() => setFirstValue(3)}
    </View>
    <Chart01 value={firstValue} />
    <Chart02 value={firstValue} />
    <Chart03 value={firstValue} />
  </View>
);

В компонентах диаграммы вы можете получить доступ к переданному значению из value реквизита (или как бы вы его ни называли). Например:

 props.value
Метки: