标签: react-dom

我正在尝试学习 React，所以请耐心等待！

我正在学习一个教程来帮助我理解 react 以及如何传递组件。

我试图将道具向下传递 2 个级别，但是当我在第三个元素上呈现代码时，页面上没有任何内容。在 chrome 上使用 React Dev 工具，似乎道具加载在 Tweets.js 组件上，而不是 Tweet.js 组件上。

谁能告诉我怎么了？顺序是 App.js > Tweets.js > Tweet.js

对于参考，我正在学习以下教程，大约 15 分钟。 反应状态和道具 | 为初学者学习 React 第 4 部分

应用程序.js

import './App.css';
import Tweets from './components/Tweets';

import React from 'react';

function App() {
    const name=["Name1", "Name2", "Name3"];
    const age=["21", "22", "24"]; /* Data is created here */

    return ( 
        <div className="App">
            <Tweets me={name} age={age} />{/*Data is added to component*/ }  
        </div>
        
    );
}
export default App; …

如何删除此警告：React 无法识别showLabelDOM 元素上的 prop。

控制台日志上显示警告消息。

警告：React 无法识别 DOM 元素上的“showLabel”属性。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写“showlabel”。如果您不小心从父组件传递了它，请将其从 DOM 元素中删除。

这是我之前的问题的后续问题（但是一个独立的问题）

我正在尝试在Mac上安装react和react-dom：

npm install --save react react-dom\n

但收到以下警告（路径名替换为...）：

npm WARN saveError ENOENT: no such file or directory, open \'/Users/../Z/package.json\'\n/Users/.../Z\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac react@15.4.1 \n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac fbjs@0.8.8 \n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 core-js@1.2.7 \n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac isomorphic-fetch@2.2.1 \n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac node-fetch@1.6.3 \n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac encoding@0.1.12 \n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 iconv-lite@0.4.15 \n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 is-stream@1.1.0 \n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 whatwg-fetch@2.0.1 \n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac promise@7.1.1 \n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 asap@2.0.5 \n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 setimmediate@1.0.5 …

我已经设置了一个基本的反应应用程序create-react-app并创建了我的第一个组件 但是,由于浏览器窗口中的此错误,项目无法构建或呈现:

CountDown(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
./src/index.js
D:/ReactDev/CountDownReact/countdown/src/index.js:8

这是我的index.js文件代码:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Bulma from 'bulma/css/bulma.css'
import App from './components/App/App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

以及App.js我导入新组件的位置:

import React, {Component} from 'react';
import './App.css';
import CountDown from '../countdown/Countdown';

class App extends Component {
    render() {
        return(
            <div className="App">
                Hello …

我在试图弄清楚如何向我的模态添加一个功能正常的关闭按钮时遇到了很多问题 - 构造函数/道具没有工作，我不确定在按钮元素中的 onClick= 之后放什么。

class Modal extends React.Component {

// whenever component gets rendered to the screen we create a new div assigned to this.modalTarget
	componentDidMount() {
		this.modalTarget = document.createElement('div');
		// add class name to modal target
		this.modalTarget.className = 'modal';
		// take the div we just created and append it to the body tag in doc
		document.body.appendChild(this.modalTarget);
		// call method _render
		this._render();
	}

// whenever the component's about to update we do another render
// this render makes sure …

const boxes = {
  height: 220,
  width: 220,
  backgroundColor: 'red',
  borderRadius: '25%',
};
const main = {
  display: 'grid',
  gridTemplateColumns: 'auto auto auto',
  gridGap: '20px',
  justifyContent: 'center',
  marginTop: '20px',
};

const box = document.querySelectorAll('.boxes');
console.log(box.length);

class Easy extends React.Component {
  render() {
    return (
      <div className="easy-game">
        <div className="Easy-main" style={main}>
          <div style={boxes} className="boxes" />
          <div style={boxes} className="boxes" />
          <div style={boxes} className="boxes" />
        </div>
      </div>
    );
  }
}

export default Easy;

这是我的代码，我的 .length 方法返回 0，而有 3 个 div 使用我在 React 中开始的同一个类，所以我可能在某个地方出错