Question

我想将此代码转换为react.js，当在input标签内使用map数组时出现错误。下面演示了ReactJS代码，

这是我使用laravel的前端代码

<div class="form-group">

<label for="tags" class="text-info">Select Tags</label>

@foreach($tags as $tag)
       <div class="checkbox">
             <label>
                 <input type="checkbox" 
                      value="{{$tag->id}}"
                      name="tags[]"
                 @foreach($post->tags as $t)
                      @if($tag->id == $t->id)checked 

                     @endif 
                 @endforeach >
                {{$tag->tag}}</label>
       </div>
        @endforeach
</div>

这是我的反应代码... 在此处输入代码

   <div className="form-group row">
  <label for="inputEmail3" className="col-sm-2 col-form-label">
    TAG
  </label>
  <div className="col-sm-10">
    <div className="checkbox">
      {tate.tags.map(
        (tag) =>
        
          form.tags.map((taged) => (
                           
            <label>
              <input
                name="tag[]"
                type="checkbox"
                value={tag.id}
                onChange={handlecheck}

                defaultChecked={tag.id == taged.id ? true : false}
              />

             {tag.Tag_name}

            </label>
          )):</div></div></div>

Answer 1

render() {
  const elements = ['one', 'two', 'three'];

  const items = []

  for (const [index, value] of elements.entries()) {
    items.push(<li key={index}>{value}</li>)
  }

  return (
    <div>
      {items}
    </div>
  )
}

另一个示例如下：

render() {
    return (
      <table className="table">
        <tbody>
          {Object.keys(templates).map(function (template_name) {
            return (
              <tr key={template_name}>
                <tr>
                  <td>
                    <b>Template: {template_name}</b>
                  </td>
                </tr>
                {templates[template_name].items.map(function (item) {
                  return (
                    <tr key={item.id}>
                      <td>{item}</td>
                    </tr>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    );
  }
}

如何在反应中使用嵌套循环

1 个答案: