小编Vam*_*msi的帖子

如何将图标和文本传递给 React 中的按钮?

我必须将一个图标和文本传递给一个按钮,而这个按钮在一个组件中,并且该组件名称在我的项目中是 ReusableButton。我的问题是我还有两个按钮样式相同的按钮,但图标和文本不同。因此,如果我知道如何将图标和文本传递给按钮,那么我就可以恢复该按钮组件。我会分享我的代码,所以请检查一遍。不过,如果我不清楚我的疑问,请发表评论

这是 App.js

import React from 'react';
import './App.css';
import Navbar from './Navbar/Navbar'
import Button from './Button/Button'

function App() {
  return (
    <div className="App">
      <Navbar></Navbar>
      <Button></Button>
    </div>
  );
}

export default App;

Run Code Online (Sandbox Code Playgroud)

这是 App.css

I didn't apply any css in App.css
Run Code Online (Sandbox Code Playgroud)

这是 Navbar.js

import React, { Component } from 'react';
import './Navbar.css';


class Navbar extends Component {
    render() {
        return (
            <div className='container-fluid'>
                <div className='row'>
                    <div className='col-6'>
                        <nav className="logoclass navbar navbar-expand-lg navbar-light">
                            <a className='hyperlinkStyle' href='www.facebook.com'>
                                <img className='logoStyle' src='assets/images/logo.png' alt='logo'></img> …
Run Code Online (Sandbox Code Playgroud)

reactjs

5
推荐指数
1
解决办法
1万
查看次数

Reactjs中有哪些节点?

我对Reactjs很陌生,我在学习react时遇到了这个问题,reactjs中的节点是什么,节点在reactjs中有何用处以及为什么我们必须使用它们?用简单的实时场景向我解释一下。

reactjs

3
推荐指数
1
解决办法
3140
查看次数

如何在reactjs中将数组从父组件传递给子组件

我的项目中有两个组件,第一个组件是 App 我在创建项目时得到了这个 App 组件。第二个组件是教室。现在App.js,我有一个数组,在该数组中,我有四个不同的名称。现在我必须为我的子组件 ClassRoom 传递这四个名称。我知道如何将对象数组循环到 React。但我不知道如何循环数组并将该数组传递给子组件,以便帮助我完成此任务。

这是 App.js

import React from 'react';
import './App.css';
import ClassRoom from './ClassRoom/ClassRoom';

function App() {
  const students = ['shiva', 'krishna', 'ram', 'madhav']
  return (
    <div className="App">
     <ClassRoom></ClassRoom>
    </div>
  );
}

export default App;
Run Code Online (Sandbox Code Playgroud)

这是 App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #09d3ac; …
Run Code Online (Sandbox Code Playgroud)

reactjs

0
推荐指数
1
解决办法
1667
查看次数

标签 统计

reactjs ×3