В React JavaScript, Как вызвать класс внутри другого класса? - PullRequest
Новая
       33

В React JavaScript, Как вызвать класс внутри другого класса?

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

Я начал изучать JavaScript и в эти дни реагировал, я пытался нарисовать некоторые сетки на веб-сайте и столкнулся с такой проблемой:

Все работает нормально, когда я кодирую так: 

export default class PathfindingVisualizer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nodes: [],
    };
  }

  componentDidMount() {
    const nodes = getInitialGrid();
    this.setState({ nodes });
  }

  render() {
    const { nodes } = this.state;
    console.log(nodes);
    return (
      <>
        <p style={{ fontSize: 40 }}>Visualize Algorithms</p>
        <br />
        <br />
        <div className="node-container">{nodes}</div>  // HERE WORKS FINE
      </>
    );
  }
}

И веб-сайт оказался таким, и это нормально:

enter image description here

Но когда я изменил код следующим образом: 

  render() {
    const { nodes } = this.state;
    console.log(nodes);
    return (
      <>
        <p style={{ fontSize: 40 }}>Visualize Algorithms</p>
        <br />
        <br />
        <NodeContainer>{nodes}</NodeContainer>  // HERE
      </>
    );
  }
}

Сетки просто исчезают, и ничего в <body>:

enter image description here

Кто-нибудь может мне помочь? Я не могу понять, почему это происходит.

Класс NodeContainer и Node выглядят так: 

export default class NodeContainer extends Component {
  render() {
    return <div className="node-container"></div>;
  }
}

export default class Node extends Component {
  render() {
    return <div className="node-item"></div>;
  }
}

Эй, спасибо вам, ребята, за ответы :) Я впервые задаю вопрос здесь. Я решил проблему, добавив {this.props.xxxxx}, как вы сказали, и это работает. Исправлены коды следующим образом: 

...
        <br />
        <br />
        <NodeContainer nodes={nodes}></NodeContainer> // HERE
      </>
...

класс NodeContainer: 

export default class NodeContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return <div className="node-container">{this.props.nodes}</div>; //HERE
  }
}

Я не использовал 'this.props.children', но проверю позже. Я пропустил учебник по основам c, поэтому я не понимал, как передавать параметры в класс, я проверил это видео, чтобы помочь себе быстро понять это:
https://www.youtube.com/watch?v=ICmMVfKjEuo&list=PLN3n1USn4xlntqksY83W3997mmQPrUmqM&index=5&t=0s

Ответы [ 3 ]

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

Для этого нужно позвонить children в props

export default class NodeContainer extends Component {
  render() {
    return <div className="node-container">{this.props.children}</div>;
  }
}
0 голосов
/ 12 апреля 2020

Чувак, в reactJS должны быть данные, которые нужно передать из родительского элемента в дочерний элемент. В вашем случае, чтобы иметь возможность отображать нужные данные,

  1. вам нужно передать ваше состояние из <PathFindingVisualizer /> в <NodeContainer />, что вы сделали с помощью узла как дети между <NodeContainer /> тегом. И вы забыли второй шаг,

  2. Вам необходимо получить доступ к данным, которые вы передали в <NodeContainer /> классе, который вы сделали. Как? просто получите к нему доступ, используя this.props.children.

    , вот пример. 

    export default class NodeContainer extends Component {
      render() {
        return <div className="node-container">{this.props.children}</div>
      }
    }
Проблема решена.

в качестве ссылки смотрите это. https://learn.co/lessons/react-this-props-children

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

Я не вижу, где ссылается класс Node, поэтому я не уверен, что это актуально.

Ваша проблема в том, что вы передаете компонент nodes компоненту NodeContainer, но не рендеринг это в NodeContainer. Вы должны посмотреть, как props передается компонентам - они выглядят как this.props.children на компоненте. Ваш код должен выглядеть следующим образом. 

 export default class NodeContainer extends Component {
      render() {
        return <div className="node-container">{this.props.children}</div>;
      }
 }

Если вам интересно, как nodes выглядит как this.props.children, это из-за того, как React обрабатывает компоненты. Вы можете достичь того же самого, передавая это в children явно как реквизит.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...