标签: reactjs

我看过两者都可以互换使用.

两者的主要用例是什么？有优点/缺点吗？这是一个更好的做法吗？

我想阅读onClick事件值属性.但是当我点击它时,我在控制台上看到类似的东西:

SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target

我的代码工作正常.当我运行时,我可以看到{column}但无法在onClick事件中获取它.

我的代码:

var HeaderRows = React.createClass({
  handleSort:  function(value) {
    console.log(value);
  },
  render: function () {
    var that = this;
    return(
      <tr>
        {this.props.defaultColumns.map(function (column) {
          return (
            <th value={column} onClick={that.handleSort} >{column}</th>
          );
        })}
        {this.props.externalColumns.map(function (column) {
          // Multi dimension array - 0 is column name
          var externalColumnName = column[0];
          return ( <th>{externalColumnName}</th>);
        })}
      </tr>
    );
  }
});

如何将值传递给onClickReact js中的事件？

在渲染组件后,将焦点设置在特定文本字段上的反应方式是什么？

文档似乎建议使用refs,例如:

ref="nameInput"在渲染函数的输入字段中设置,然后调用:

this.refs.nameInput.getInputDOMNode().focus(); 

但我应该在哪里打电话呢？我尝试了几个地方,但我无法让它工作.

我正在构建一个React组件,它接受JSON数据源并创建一个可排序的表.
每个动态数据行都有一个分配给它的唯一键,但我仍然收到以下错误:

数组中的每个子节点都应该具有唯一的"键"支柱.
检查TableComponent的render方法.

我的TableComponentrender方法返回:

<table>
  <thead key="thead">
    <TableHeader columns={columnNames}/>
  </thead>
  <tbody key="tbody">
    { rows }
  </tbody>
</table>

该TableHeader组件是单行,并且还具有分配给它的唯一键.

每个rowin rows都是使用具有唯一键的组件构建的:

<TableRowItem key={item.id} data={item} columns={columnNames}/>

而TableRowItem看起来像这样:

var TableRowItem = React.createClass({
  render: function() {

    var td = function() {
        return this.props.columns.map(function(c) {
          return <td key={this.props.data[c]}>{this.props.data[c]}</td>;
        }, this);
      }.bind(this);

    return (
      <tr>{ td(this.props.item) }</tr>
    )
  }
});

是什么导致了唯一的关键道具错误？

我正在使用React-router,当我点击链接按钮时它工作正常,但是当我刷新我的网页时它没有加载我想要的东西.

例如,我进入localhost/joblist,一切都很好,因为我来到这里按一个链接.但是,如果我刷新网页,我得到:不能GET/joblist

默认情况下它没有像这样工作.最初我有我的URL:localhost /#/和localhost /#/ joblist,他们工作得非常好.但是我不喜欢这种网址,所以试图抹去我写的'#':

Cannot GET /joblist

localhost /不会发生这个问题,这个问题总是返回我想要的.

编辑:这个应用程序是单页面,因此/ joblist不需要向任何服务器询问任何内容.

EDIT2:我的整个路由器.

Router.run(routes, Router.HistoryLocation, function (Handler) {
 React.render(<Handler/>, document.body);
});

我创建了一个空白的 React 项目，使用命令：npx create-react-appon npm v7.0.7 和 Node v15.0.1

安装：

• 反应 v17.0.1,
• 节点sass v5.0.0，

然后我尝试将空白的 .scss 文件导入 App 组件：

应用程序.js

import './App.scss'

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

export default App;

抛出错误：

Failed to compile.

./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s
ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

包.json

{
  "name": "react-17-node-sass-5",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "node-sass": "^5.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4" …

我正在观看关于React的Pluralsight课程,导师说道具不应该改变.我现在正在阅读一篇关于道具与状态的文章(uberVU/react-guide),它说

道具和状态更改都会触发渲染更新.

在文章的后面它说:

道具(属性的简称)是组件的配置,如果可以的话,它的选项.他们是从上面收到的,不可改变的.

• 道具可以改变,但它们应该是不可改变的？
• 什么时候应该使用道具？什么时候应该使用状态？
• 如果你有React组件需要的数据,它应该通过道具或React组件中的设置通过getInitialState吗？

何时重要的props是super(),为什么？

class MyComponent extends React.Component {
  constructor(props) {
    super(); // or super(props) ?
  }
}

我收到此错误:

未捕获错误:不变违规:元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:object.

这是我的代码:

var React = require('react')
var ReactDOM =  require('react-dom')
var Router = require('react-router')
var Route = Router.Route
var Link = Router.Link

var App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
        </ul>
      </div>
    )
  }
})

var About = require('./components/Home')
ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
    </Route>
  </Router>
), document.body)

我的Home.jsx文件:

var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');

var Home = React.createClass({
  render:function() {
    return (
        <RaisedButton label="Default" /> …

我知道你可以在React类中指定样式,如下所示:

var MyDiv = React.createClass({
  render: function() {
    var style = {
      color: 'white',
      fontSize: 200
    };

    return <div style={style}> Have a good and productive day! </div>;
  }
});

我是否应该以这种方式做所有样式,并且我的CSS文件中没有指定任何样式？

或者我应该完全避免使用内联样式？

做两件事似乎很奇怪和混乱 - 在调整样式时需要检查两个地方.