我刚刚更新了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" ...}如果有人能给我任何关于如何调试的信息,我将非常感激!
是否有可能在所有建议结束时添加自定义行?我想添加一个"显示更多建议",这是一个链接到另一个页面.
$(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的基本示例.我看到错误消息在"模板"中的"空"处触发,它有一个选项,它可以触发列表完成或类似的东西.
非常感谢你的帮助.
所以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看到这篇文章,但他们没有提供可行的替代方案.
谢谢你的帮助!
所以我有这两个使用 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 提供的主题?
我有一个销售产品的项目。
产品可以有价格和可选:new_price。我希望能够按价格/新价格组合对它们进行排序,这意味着我需要在数据库中添加一个额外的条目,例如“final_price”。我有一个想法,在 Content-Type Builder/schema.json 中创建一个不可编辑的字段“new_price”,然后在生命周期.js 中的“beforeCreate”上使用产品的最终价格更新该字段。但是,我不确定 Strapi 是否允许这样做,因为我无法在文档中找到指向它可以这样做的资源。如果有什么hacky的方法,请指教。我也愿意接受有关如何执行此业务逻辑的各种其他建议。
先感谢您。
我有一个模态的以下模板
<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) reactjs ×3
javascript ×1
jquery ×1
material-ui ×1
react-16 ×1
strapi ×1
templates ×1
typeahead ×1
typeahead.js ×1
typescript ×1