React基础案例05＋06 JSX使用外部变量和方法

案例05：JSX使用外部变量

创建项目

npx create-react-app my-react-app

cd my-react-app

npm start

移除多余文件

删除src下除了index.js之外的所有其他文件，最终的目录结构如下：

自定义DateTimeNow组件并使用

新增src/DateTimeNow.js组件，DateTimeNow组件演示React组件如何使用外部变量，而DateTimeNow1演示如何使用JSX如何使用外部变量：

import React from 'react';

class DateTimeNow extends React.Component

{

  render ()

  {

      const dateTimeNow = new Date().toLocaleString();

      return React.createElement("span",null,`Current date and time is $.`)

  }

}

class DateTimeNow1 extends React.Component

{

  render ()

  {

      const dateTimeNow = new Date().toLocaleString();

      return `Current date and time is ${ dateTimeNow }.`

  }

}

export

{

  DateTimeNow,

  DateTimeNow1,

}

新增src/App.js组件：

import React, { Fragment, Component } from 'react';

import { DateTimeNow,DateTimeNow1 } from './DateTimeNow';

// 核心的App组件

class App extends Component

{

render ()

{

  return (

  )

}

}

// 导出APP

export default App;

修改src/index.js组件：

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(

React.createElement( App ),

document.getElementById( 'root' )

);

访问测试

重启服务，访问：http://localhost:3000/

案例06：JSX使用外部方法

创建项目

npx create-react-app my-react-app

cd my-react-app

npm start

移除多余文件

删除src下除了index.js之外的所有其他文件，最终的目录结构如下：

自定义ButtonList组件并使用

新增src/ButtonList.js组件，在ButtonList中定义了一个getButton方法，然后在JSX中调用该方法：

import React from 'react';

class ButtonList extends React.Component

{

  // 外部的方法

  getButton ( text )

  {

      return { text}

  }

  render ()

  {

      return (

              { this.getButton("点赞") }

              { this.getButton("收藏") }

      )

  }

}

export default ButtonList;

新增src/App.js组件：

import React, { Fragment, Component } from 'react';

import ButtonList from './ButtonList';

// 核心的App组件

class App extends Component

{

render ()

{

  return (

  )

}

}

export default App;

修改src/index.js组件：

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(

React.createElement( App ),

document.getElementById( 'root' )

);

访问测试

重启服务，访问：http://localhost:3000/