Question

我是新手做出反应。我正在尝试创建一个名为StationBrowserForHome（TSX）的组件。在render（）函数中，我想呈现一个如下所示的DOM元素：

<div class = "big-group">
 <div class = "small-group>
   <div class="item"></item>
   <div class="item"></item>
   ...
   <div class="item"></item>
 </div>
 <div class = "small-group>
   <div class="item"></item>
   <div class="item"></item>
   ...
   <div class="item"></item>
 </div>
 ...
</div>

所以我尝试在componentWillMount（）中创建DOM树，将其设置为状态变量＆＃34; divItems＆＃34;，并在render（）中，我检索它

export class StationBrowserForHome extends Component <{}, any> {
    componentWillMount (){
        var divItems = document.createElement("div");
        var divSeven = document.createElement("div");

        for (var i = 0; i < 7; i++) {
            var singleItem = document.createElement('<div className="station-item"><div className="row"><StationBrowserItemInfo/></div><div className="row station-name">Station {i}</div></div>');
            divSeven.appendChild(singleItem);
            console.log("singleItem: "+singleItem);
            console.log("divSeven: "+divSeven);

        }
        divItems.appendChild(divSeven);
        this.setState({divItems:divItems});
    }

    render() {

        return (
            <div className="container-fluid text-center browser">
                <div className="cover-div">
                    <ArrowButton/>
                    <div className="text-center list-station" id="station-browser">
                        { this.state.divItems }
                    </div>
                </div>
            </div>
        );
  }
}

我收到此错误消息：

VM19339 invariant.js：42未捕获错误：对象无效 React child（找到：[object HTMLDivElement]）。如果你打算渲染一个儿童的集合，改为使用数组

任何帮助将不胜感激！

Answer 1

React非常棒，因为您可以将其分解为可重用的组件。这段代码违背了反应的全部含义。

componentWillMount中的所有内容都应位于包含道具numberOfItems的组件中，然后基于此，您将呈现对我来说似乎是站项目的内容。

export class StationList extends React.Component<{stations: IStation[]}, {}> {
  render() {
    return (
       <div className='stations'>
         {this.getStationItems}
       </div>
    );
  }

  private getStationItems() {
     const itemsDiv = this.props.stations.map((station, index) => {
       return (
          <div className='station'>
            //........
            // other stuff here
          </div>
       )
     });
     return itemsDiv;

  }
}

然后返回StationBrowserForHome组件，我们只是：

    const stations: IStation[] = [
       {
          id: 'station1',
          purpose: 'purpose1'
       },
       {
          id: 'station2',
          purpose: 'purpose2'
       }
    ];

    return (
        <div className="container-fluid text-center browser">
            <div className="cover-div">
                <ArrowButton/>
                <div className="text-center list-station" id="station-browser">

                    <StationList stations={stations} />
                </div>
            </div>
        </div>
    );

上面的代码只是一个不在IDE前面的通用模板，但它是基本的要点。

Answer 2

为什么使用这种方式，你可以像这样轻松地用JSX创建一个元素

componentWillMount() {
  let ele = <div> </div>;
  }

如果你想要循环元素或任何工作，你可以使用map函数（像foreach这样的javascript循环方法）

componentWillMount() {
   this.state.count.map( (e) => ( ... ) )
  }

在上面的示例e参数中，请参考您的对象，例如

  constructor(props) {
     super(props);
     this.state = {
       data:[ 
        {
           id:1,
           name:'hamid'
         },
         {
           id:2,
           name:'mat'
         },
         {
           id:3,
           name:'sara'
         }

        ]    
       }

    this.state.data.map( (item) => (

        <li key={item.id} > {item.name} </li>       

     ));

你在DOM中有这个

   <li>hamid</li>
   <li>mat</li>
   <li>sara</li>

并且您必须在map函数中的顶级根元素中设置键属性，并且每个项目必须为uniq

Answer 3

最好在功能组件上创建并传递所需的数据进行渲染。

TypeError: The `text` argument passed to `__init__(text)` must be a string, not <class 'float'>

在渲染中，将状态数据传递给it.data

const MyComp = ({counter}) => {
    return (
      <div>{(" ".repeat(7).split("")).map((value, index) => (
          <div class="big-group">
            <div class="small-group">{index+1}</div> //for example
          </div>
        ))
}</div>
    );
  }

如何传递javascript生成的DOM元素以响应渲染函数

3 个答案: