小编Chr*_*ova的帖子

React 16.2 <Fragment>给出Uncaught错误:元素类型无效

我刚刚更新了16.2的反应,我想使用酷片段功能.但是,只要以一种简单的方式使用它,我就会收到奇怪的错误:

<React.Fragment>asd</React.Fragment>
Run Code Online (Sandbox Code Playgroud)

错误状态:未捕获错误:元素类型无效:预期字符串(对于内置组件)或类/函数(对于复合组件)但得到:符号.

当我记录上面的代码和我定义的随机组件时,我得到这个信息:

$$typeof: Symbol(react.element)
key: null
props: {children: "asd"}
ref: null
type: Symbol(react.fragment)
...
Run Code Online (Sandbox Code Playgroud)

当我记录我的元素时,我得到几乎相同的信息:

$$typeof: Symbol(react.element)
key: null
props: {children: "sfdghs"}
ref: null
type:ƒ Column(_ref)
Run Code Online (Sandbox Code Playgroud)

我的问题是:为什么应用程序需要字符串或函数.

我的package.json中的所有相关依赖都是这样的:

  • "devDependencies": {... "@types/react": "^16.0.0" ...}
  • "dependencies" : {... "react": "^16.2.0", "typescript": "2.6.2" ...}

如果有人能给我任何关于如何调试的信息,我将非常感激!

typescript reactjs

17
推荐指数
1
解决办法
3928
查看次数

Typeahead添加自定义行以结束建议

是否有可能在所有建议结束时添加自定义行?我想添加一个"显示更多建议",这是一个链接到另一个页面.

$(function(){

var countries = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: {
    url : '/json/temp/countries.json',
    filter: function(list) {
      return $.map(list, function(country) { return { name: country }; });
    }
  },
});

countries.initialize();

$('.component-search-button .ui-input input').typeahead(null, 
{
   highlight: true,
   name: 'countries',
   displayKey: 'name',
   source: countries.ttAdapter(),
   templates: {
     empty: [
       '<div class="empty-message">',
          '<i>Unfortunatelly we coud not find items that match the current query. Please    try again.</i>',
       '</div>'
     ].join('\n'),
     suggestion: Handlebars.compile('<p><strong>{{name}}</strong></p>')
   }
 }
);


});
Run Code Online (Sandbox Code Playgroud)

它遵循Git的基本示例.我看到错误消息在"模板"中的"空"处触发,它有一个选项,它可以触发列表完成或类似的东西.

非常感谢你的帮助.

typeahead handlebars.js typeahead.js

9
推荐指数
1
解决办法
3509
查看次数

React 16.4允许从状态更改中调用getDerivedStateFromProps.如何应对?

所以16.4"修复了"getDerivedStateFromProps中的一个错误,现在它在道具更改和状态更改时被解雇了.显然这是有意的,来自这篇文章:https://github.com/facebook/react/issues/12898.但是对我来说,在州内保存以前的道具是一个重大的过度杀伤,所以我问是否有人在处理这样的案件时做了一个程序:

class Componentche extends React.Component {
  state = {
    valuesForInput: {
      input1: ''
    }
  }
  static getDerivedStateFromProps(props, state) {
    if (props.someInitialValuesForInput.input1 !== state.valuesForInput.input1) {
      return {
       valuesForInput: {
         ...state,
         input1: props.someInitialValuesForInput.input1
       }
      }
    }
   return state;

   render () {
      <Input value='valuesForInput.input1' onChange='(e) => setState({valuesForInput: {...this.state, input1: e.target.value }})'
   }
}
Run Code Online (Sandbox Code Playgroud)

所以在上面这种情况下,我永远不会改变输入,因为getDerivedStateFromProps将在接收的新道具和setState触发器上执行,我的条件永远不会是假的.

那么处理这种情况的正确方法是什么?我是否需要在州内保留旧道具并将其用于条件?

我刚从React看到这篇文章,但他们没有提供可行的替代方案.

谢谢你的帮助!

javascript reactjs react-16

8
推荐指数
1
解决办法
436
查看次数

MUI ThemeProvider 未在已编译的组件中注入主题

所以我有这两个使用 MUI 的项目。其中一个仅包含小型功能组件(一个库),另一个通过以下方式导入组件的“库”yarn link,并且应该通过“ThemeProvider”应用自定义主题。

我使用故事书作为我的组件列表。为了看到所有内容都按预期工作,我使用 Storybook 的插件:“storybook-addon-material-ui”。

我如何定义故事的示例代码:

storiesOf('Tile', module)
  .addDecorator(muiTheme([myCustomTheme]))
  .add('Default', withInfo()(() => (
    <div>
      <Tile title="Title goes here" />
    </div>
  )))
Run Code Online (Sandbox Code Playgroud)

Storybook 显示了我想要的确切结果。我的自定义主题也是从库项目导出的。当我在我的工作项目(导入库的项目)中使用它时,我通过 import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';在第一个可能的包装组件中定义主题:

class Layout extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
         // Provider, Routing, etc
      </MuiThemeProvider>
    )
  }

}
Run Code Online (Sandbox Code Playgroud)

结果:我的工作项目中的每个 MUI 组件(除了我的库组件)都采用我的自定义主题进行样式化。然而,我的自定义组件的样式采用核心中的基本 MUI 主题。

当我使用这些组件时,它们已经使用脚本构建:

BABEL_ENV=production babel src -d lib --ignore src/**/*.story.jsx,src/**/*.spec.js,src/**/*.test.js
Run Code Online (Sandbox Code Playgroud)

我是否缺少一些需要为自定义组件提供的设置,以便它们使用我的 MUI 提供的主题?

reactjs material-ui

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

在 Strapi 中创建不可编辑字段

我有一个销售产品的项目。

产品可以有价格和可选:new_price。我希望能够按价格/新价格组合对它们进行排序,这意味着我需要在数据库中添加一个额外的条目,例如“final_price”。我有一个想法,在 Content-Type Builder/schema.json 中创建一个不可编辑的字段“new_price”,然后在生命周期.js 中的“beforeCreate”上使用产品的最终价格更新该字段。但是,我不确定 Strapi 是否允许这样做,因为我无法在文档中找到指向它可以这样做的资源。如果有什么hacky的方法,请指教。我也愿意接受有关如何执行此业务逻辑的各种其他建议。

先感谢您。

strapi

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

Underscore.js模板从对象迭代循环

我有一个模态的以下模板

<div class="ui-modal">
  <div class="mask"></div> 
  <div class="ui-modal-container">
    <div class="ui-modal-header">
      <h3><%= modal['title'] %></h3>
    </div>
    <div class="ui-modal-text">
      <p><%= modal['description'] %></p>
    </div>
    <% if ( modal['buttons'] !== 'undefined' ) { %>
      <div class="ui-button-container">
        <a class="ui-button ui-button-pill <%= modal['buttons'][0]['extra_class'] %> " href="<%= modal['buttons'][0]['href'] %>">
          <span class="label">
            <span class="section"><%= modal['buttons'][0]['label'] %></span> 
          </span>
        </a>
      </div>
    <% } %>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

这是我试图填充它的数据:

_data = {
 "modal" : {
    "title" : "Your address is:",
    "description" : "Some desc here",
    "buttons" : [
       {'extra_class': 'small left', 'href' : '#register/3', …
Run Code Online (Sandbox Code Playgroud)

jquery templates underscore.js underscore.js-templating

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