Компоненты рендеринга ReactJS на основе выбора пользователя
Так что мне почти неделя, чтобы отреагировать, и я не писал кода javascript годами. Так что, пожалуйста, простите мое невежество, если оно есть.
Вопрос Я создал три разных класса компонентов
const CreatedDate = React.createClass({
displayName: 'CreatedDate',
propTypes: {
name: 'CreateDate',
from: React.PropTypes.string,
to: React.PropTypes.string,
format: React.PropTypes.string,
onChange: React.PropTypes.func
},
// остальной код и функции
Точно так же у меня есть класс, похожий на этот, с именем ClientSignedDate и VerificationDate, все из которых содержат в основном одинаковые входные реквизиты, но получают данные из разных столбцов одной и той же таблицы.
В отдельном родительском классе под названием Filter Я создал массив этих компонентов внутри этого класса
const dateOptions = [CreatedDate, ClientSignedDate, VerificationDate];
Раньше он работал, когда был только один компонент
<CreatedDate
from = {this.props.filter.createdDateFrom}
to = {this.props.filter.createdDateTo}
onChange = {this.handleCreatedDateChange}
/>
И я в основном хочу визуализировать компонент на основе выбора пользователя, но я не могу понять, как это сделать. Что-то похожее на приведенный ниже фрагмент, но позволяющее рендеринг.
<select>{dateOptions.map(x => <option>{x}</option>)}</select>
Я хочу визуализировать разные компоненты, которые используют одни и те же свойства, в зависимости от того, что выбрал пользователь.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Компоненты, определяемые пользователем, должны начинаться с заглавных букв, чтобы их можно было отображать.
Просто попробуйте:
<select>{dateOptions.map(Option => <option><Option /></option>)}</select>
Также не забудьте установить свойство key для элемента option.
Кто-то проголосовал за все ответы без каких-либо отзывов. Спасибо за ваш вклад. У меня не было возможности взглянуть на это.
@shashwatZing Не беспокойтесь.
And I basically want to render the component based on user selection
Самый простой способ
{ this.state.selection === 1 && <CreatedDate ... /> }
{ this.state.selection === 2 && <ClientSignedDate ... /> }
И так далее.
Обновлено: на основе дополнительной информации другой вариант:
const dateOptions = [CreatedDate, ClientSignedDate, VerificationDate];
const Comp = dateOptions[this.state.selection]; // pick element
тогда используйте
<Comp
from = {this.props.filter.createdDateFrom}
to = {this.props.filter.createdDateTo}
onChange = {this.handleCreatedDateChange}
/>
Кто-то проголосовал за все ответы без каких-либо отзывов. Спасибо за ваш вклад. У меня не было возможности взглянуть на это.
Спасибо чувак. Мне удалось просмотреть ваш код. Это действительно здорово.
На самом деле я проголосовал против двух других, потому что они не поняли, о чем вы спрашивали, и поэтому дали бесполезные ответы. Моя, очевидно, была отвергнута кем-то, кто тоже этого не понимал. Поскольку вы рассказали hsz о том, что его решение работает отлично, мне остается только гадать, зачем вы помещаете Компонент с функциями, свойствами и прочим внутри элемента <option>. Я интерпретировал ваш примерный код как пример динамического рендеринга в целом и предположил, что это вообще не касается содержимого <option>. Я все-таки ошибаюсь?
Компоненты React должны быть в верхнем регистре. Оттуда вы можете использовать переменный компонент.
Недавно я сослался на этот вопрос, который мне помог. Это не совсем то, о чем вы спрашиваете, но это связано с той же проблемой. Этот вопрос тоже.
<select>{dateOptions.map((Option, index) => <option key = {`unique_${index}`}><Option /></option>)}</select>
Убедитесь, что ваш key уникален, когда вы используете Array.map. Если вы добавляете / удаляете компоненты Option динамически, вы можете столкнуться с проблемами, используя простой индекс массива в определенных ситуациях. Подробнее об этом здесь.
Кто-то проголосовал за все ответы без каких-либо отзывов. Спасибо за ваш вклад. У меня не было возможности взглянуть на это.
Ха-ха, не беспокойтесь. Если вы в конечном итоге воспользуетесь этим, дайте мне знать, если у вас возникнут какие-либо проблемы.
Вы по существу спрашиваете, как визуализировать динамические компоненты вместо использования только статического JSX? Вот как я понимаю ваш вопрос.