Блог

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

ReactJS : Передача реквизитов без их рендеринга

#reactjs

Вопрос:

Я новичок в ReactJS.

Я передаю значения ребенку, и все нормально.

Мне нравится реквизит, рендеринг работает. Но я не хочу отображать их на своей Родительской странице .

Я хочу иметь доступ к реквизитам внутри Дочерней страницы, но я не хочу, чтобы они отображались на моей Родительской странице ( за исключением ссылки ).

Извините, если я немного сбит с толку, я не уверен, какой инструмент здесь использовать. Спасибо.

ParentPage.js

 import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
import ChildPage from './ChildPage.js';

const ParentPage = () => {

  const employees = [{
    name: "shaun",
    id: 1,   
  },
  {
    name: "brian",
    id: 2,   
  },
  {
    name: "geroge",
    id: 3,   
  },
]

return (
  <div>

  {employees.map((employee) => (

    <ChildPage name={employee.name} id={employee.id} />

    <Link to={"/childpage/"   employee.name }> {employee.name} </Link>
 
  ))}

};

export default ParentPage;

ChildPage.js

 const ChildPage = (props) => {

  const { name, id } = props


return (
  <div>

  <p> your name is : {name} and your id is : {id} </p>

  </div>
};

export default ChildPage;

Комментарии:

1. Ваш вопрос очень сбивает с толку! Какого результата вы ожидаете?

2. Ваш вопрос неясен, вы можете предоставить некоторый снимок вашего пользовательского интерфейса, который может помочь

3. Массив сотрудников неправильно инициализирован, закрывающая скобка отсутствует после },

4. Я хочу передать переменную, которую я создал «сотрудники», еще не используя ее. С моей родительской страницы на мою детскую страницу.

5. Вы хотите сказать, не объявляя об этом родителю?

Ответ №1:

Ваши ChildPage возвраты

 <div>

  <p> your name is : {name} and your id is : {id} </p>

</div>

который будет передан вам ParentPage . Это <Link> не внутри вас ChildPage .

Я думаю, что ты хотел сделать вот что:

ParentPage.js

 const ParentPage = () => {

  const employees = [{
    name: "shaun",
    id: 1,   
  },
  {
    name: "brian",
    id: 2,   
  },
  {
    name: "geroge",
    id: 3,   
  },


return (
  <div>

  {employees.map((employee) => (

    <ChildPage name={employee.name} id={employee.id} />
 
  ))}

};

ChildPage.js

 const ChildPage = (props) => {

  const { name, id } = props


return (
   <Link to={"/childpage/"   name }> {name} </Link>
};

Ответ №2:

Вы должны удалить ChildPage из employees.map in ParentPage , тогда он не будет отображаться.

Держу пари, у вас есть ChildPage в вашем router.js , потому что у вас есть работа <Link /> для вас ChildPage .

Если вы хотите передать параметры, просто напишите это против вашего <Link /> :

 <Link to={{ screen: 'childpage', params: { id: employee.id, name: employee.name } }}>
      {employee.name}
</Link>

Затем в свой <ChildPage /> вы должны получить переданные параметры, подобные этому:

 const ChildPage = ({navigation, route}) => {

  const { params } = route


return (
  <div>

  <p> your name is : {params.name} and your id is : {params.id} </p>

  </div>
};

export default ChildPage;
Метки: