Массив проходов как опоры в реакциях

Я новичок в реакции.

Я экспериментировал, реагируя, и я застрял в том, как передавать массив с помощью реквизита.

случай-1:

var c = ['program'];
var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: ['everyone']
        };
    },
    render: function () {
        return (
            <div className="navigation">
                helloworld {this.props.config[0]};
            </div>
            );
    }
});

React.render(<Navigation config={c}/>, document.body);

Это рендеринг программы helloworld. который ожидается.

Позже я пробовал.

случай-2:

var c = ['program'];
var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: ['everyone']
        };
    },
    render: function () {
        return (
            <div className="navigation">
              {this.props.config} helloworld ;
            </div>
            );
    }
});

React.render(<Navigation config="React"/>, document.body);

Это рендеринг Reall helloworld. который ожидается, поскольку нет определенного propType.

Далее я пробовал.

case-3:

var c = ['program'];
var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: ['everyone']
        };
    },
    render: function () {
        return (
            <div className="navigation">
                helloworld {this.props.config[0]};
            </div>
            );
    }
});

React.render(<Navigation config=['!!!'] />, document.body);

Что не делает ничего.

Позже, когда я изменил React.render(<Navigation config=['!!!'] />, document.body); на React.render(<Navigation config={['!!!']} />, document.body);

он отобрал helloworld!!!

В каком-то учебнике я прочитал, что фигурные скобки используются для передачи переменных, чтобы JSX знал, что они являются внешней переменной.

Но почему case-3 не работает с явными фигурными фигурными фигурными скобками, хотя массив сделан во время вызова и почему он работает для case-2, где строка сделана встроенной.

Когда точно используются фигурные скобки?

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

Ответ 1

Внутри элементов JSX необходимо использовать фигурные скобки только. Вот так:

<MyComponent somProp={['something']} />

В вышеприведенном случае {} - это способ сказать: "Оцените выражение, которое я прошел внутри, и передайте его как опору". В пределах {} вы можете передать любой действительный объект или выражение JavaScript. Обратите внимание, что если вы передаете строку и, в частности, для строк, вам не нужны фигурные скобки... например <MyComponent somProp="something" />.

Приведенный выше код эквивалентен этому:

var myArray = ['something'];
<MyComponent somProp={myArray} />

Ответ 2

Вам вообще не нужно указывать PropTypes для использования реквизитов. Это просто хороший способ документировать и проверять типы поддержки во время разработки.

Вы правильно используете {}. {} вернет значение выражения внутри.

Однако {['everyone']} не имеет большого смысла. Здесь вы запрашиваете, чтобы React возвращал значение самого массива, а не один из элементов/значений в массиве.

Чтобы получить первое значение из вашего массива, вы должны делать: {this.props.config[0]}, так как значение "каждый" находится в индексе 0 массива.

Если ваш массив имел несколько значений, вы делали бы что-то в строках:

render: function() {
  var values = this.props.config.map(function(value, i){
    return (
      <p>value</p>
    );
  });

  return (
    <div className="navigation">
      helloworld {values};
    </div>
  );
}

Если вы действительно хотите распечатать сам массив, а не конкретное значение внутри него, у вас есть два хороших варианта:

render: function() {
  return (
    <div className="navigation">
      helloworld {this.props.config.toString()};
    </div>
  );
}

или

render: function() {
  return (
    <div className="navigation">
      helloworld {JSON.stringify(this.props.config)};
    </div>
  );
}

Ответ 3

render: function() {
  return (
    <ChildComponent childprop={{Array.of(arrayitem)}} className="navigation">

  );
}